@charset "utf-8";

*, *: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;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

html{
  scroll-behavior: smooth;
}

a{
  text-decoration: none;
}

img{
  vertical-align: bottom;
  backface-visibility: hidden;
  vertical-align: bottom;
  backface-visibility: hidden;
}

#wrapper{
  background:#000;
  padding-bottom:200px;
  overflow: hidden;
}

.toroku{
  position: fixed;
  bottom:-100px;
  left:0;
  right:0;
  margin:0 auto;
  z-index: 9999;
  width:80%;
  display: block;
}

.notice{
  display: block;
  width:60%;
  margin:20px auto 50px;
  text-align: center;
  border: 3px solid #fff;
  border-radius: 15px;
  color:#fff;
  padding:10px 0;
  font-size:14px;
  font-weight: bold;
}

header{
  position: relative;
  background:url(http://new.slime-den.com/img/slime-sozai4.jpg) center center / contain no-repeat;
}

header > img{
  position: absolute;
  top:0;
  right: 0;
  left:0;
  margin:0 auto;
  width:100%;
}

h1{
  padding-top:50px;
  padding-left:20px;
}

h1 img{
  width:80%;
}

.head-notice{
  padding:0 10px;
}

.head-notice > img{
  width:100%;
}

.head-notice a{
  position: absolute;
  bottom:-100px;
  left:20px;
  display: block;
  width:65%;
  z-index: 1;
}

.line{
  position: relative;
  top:-20px;
}

.pazzle-box ,.pazzle-box2{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:30px 0;
}

.pazzle-box div,.pazzle-box2 div{
  width:30%;
  padding:0 10px;
}

.pazzle-box div a,.pazzle-box2 div a{
  display: block;
  margin-bottom:20px;
}

.pazzle1{
  width:70% !important;
  display: block;
  text-align: center;
}

.back1{
  padding-top:20px;
  width:100%;
  background:url(http://new.slime-den.com/img/slime-sozai11.jpg) top center /cover no-repeat;
}

.back2{
  padding-top:20px;
  background:url(http://new.slime-den.com/img/slime-sozai12.gif) center center /cover no-repeat;
}

.back2 a:nth-of-type(1){
  display: block;
  width:80%;
  margin:0 auto;
}

.back2 a:nth-of-type(2){
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  text-align: center;
  margin:-15px auto 0;
  font-size: 16px;
  color:#fff;
  font-weight: bold;
  padding:10px;
  text-decoration: underline;
}

.back2 a:nth-of-type(2) img{
  width:50px;
  height:50px;
  margin:0 10px;
}

.back3{
  padding-top:20px;
  background:url(http://new.slime-den.com/img/slime-sozai11.jpg) center center /cover no-repeat;
}

.back3 a{
  display: block;
  width:80%;
  margin:0 auto;
}

.menu{
  position: relative;
  padding:20px 0;
  z-index: 2;
}

.menu a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  width:60%;
  margin:0 auto;
  padding:8px 0;
  font-size:14px;
  color:#fff;
  text-shadow:1px 1px 0 #111, -1px -1px 0 #111,
              -1px 1px 0 #111, 1px -1px 0 #111,
              0px 1px 0 #111,  0-1px 0 #111,
              -1px 0 0 #111, 1px 0 0 #111;
}

.menu a div{
  display: flex;
  align-items: center;
}

.menu a div img{
  width:25px;
  height:25px;
  margin-right:10px;
}

.menu a span{
  content: '';
  width:8px ;
  height:8px;
  border-top:3px solid #fff;
  border-right:3px solid #fff;
  transform: rotate(45deg);
  display: inline-block;
}

.copy{
  color:#fff;
  font-size:10px;
  text-align: center;
}

footer{
  position: relative;
}

footer > img{
  display: inline-block;
  position: absolute;
  right:-20px;
  bottom:50px;
  width:100px;
  height:100px;
  z-index: 1;
}

.effect-fade {
opacity : 0;
transform : translate(0, 80px);
transition : all 0.8s;
}

.effect-fade.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}

.license{
  margin-top:20px;
}

.license a{
  display: block;
  text-align: center;
  color:#555;
  font-size:10px;
}