@charset "utf-8";
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(187, 251, 250, 1) 25%, rgba(132, 191, 251, 1) 50%, rgba(187, 251, 250, 1) 75%, rgba(255, 255, 255, 1));
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
#wrapper {
  min-height: 100vh;
  display: flex;	
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.logo-area {
    width: 320px;
    z-index: 200;
    overflow: hidden;
}

.logo-area img {
    width: 80%;
    margin: 0 auto;
    opacity: 0.9;
    display: block;
}

.button {
    background-color: #000000;
    color: #FFFFFF;
    width: 200px;
    height: 1.5;
    outline: none;
    font-size: 1.5rem;
    line-height: 3rem;
    letter-spacing: .2rem;
    margin: 0 auto;
    text-align: center;
    display: block;
}

h1 {
    display: none;
}

.logo-area p {
    width: 100%;
    margin: 20px 0;
    font-size: .8rem;
    color: #ffffff;
    font-weight: normal;
    text-align: center;
    text-shadow: 2px 2px 3px #000000;
}

.anim01 {
  background: -webkit-linear-gradient(#bbfbfa, #a1cafe);
  background: linear-gradient(#bbfbfa, #a1cafe);
  background-size: cover;
  -webkit-animation: gradAnim 6s ease infinite;
          animation: gradAnim 6s ease infinite;
  height: 120vh;
    position: fixed;
    width: 100%;
    top: -20vh;
    left: 0px;
    z-index: 100;
    opacity: 0.6;
    mix-blend-mode: color-burn;
}
@-webkit-keyframes gradAnim {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
 
@keyframes gradAnim {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

a{
	color: #333;
	text-decoration: none;
}

.clr{
	clear: both;
}

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
	content: '';
	background-repeat: repeat;
	background-position: top left;
	background-image: url(../../img/dot.png);
	background-color: transparent;
}
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}

.cb-slideshow li:nth-child(1) span {
    background-image: url(../../img/image01.jpg)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../../img/image02.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../../img/image03.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../../img/image04.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

@-webkit-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -webkit-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	    -webkit-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -webkit-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -moz-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -moz-transform: scale(1.05);
	    -moz-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -moz-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -moz-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -o-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -o-transform: scale(1.05);
	    -o-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -o-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -o-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -ms-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -ms-transform: scale(1.05);
	    -ms-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -ms-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -ms-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.05);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -transform: scale(1.1);
	}
	100% { opacity: 0 }
}