style.css

@charset "UTF-8";
/* CSSのリセット（消さないでください） */
html,
body,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
input,
div {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}

button {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
}

li {
  list-style: none;
}


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    background-color: #F5A9F2;
}

/* =====================
	電光掲示板
======================= */
.ledText {
    overflow: hidden;
    position: relative;
    padding:5px 0;
    color: #FFB400;
    font-size: 60px;
    font-weight: bold;
    background: #333333;
}

/* CSS3グラデーションでドット感を出す */
.ledText:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);
	background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
	background-size: 2px 2px;
    z-index: 10;
}

/* CSS3アニメーションでスクロール */
.ledText span {
	display: inline-block;
	white-space: nowrap;
	padding-left: 100%;
	-webkit-animation-name: marquee;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 15s;
	-moz-animation-name: marquee;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 15s;
	animation-name: marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 15s;
}

@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

/*トップ画像*/
.top{
  height: 800px;
}
.top-left{
    width: 30%;
    height: 43%;
    position: absolute;
    top: 40%;
    left: 15%;
    z-index: 10;
}
.top-left img{
    width: 100%;
}
.top-center{
    width: 50%;
    height: 50%;
    position: absolute;
    top: 30%;
    left: 35%;
    z-index: 1;
    animation-name: neko;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
.top-center img{
    width: 60%;
}
@keyframes neko {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-120px)
    }
  }
.top-right{
    width: 30%;
    height: 43%;
    position: absolute;
    top: 40%;
    right: 15%;
    z-index: 10;
}
.top-right img{
    width: 100%;
}

/*カバー*/
.cover{
  position: relative;
  height: 600px;
  /*min-height: 100vh;*/
  background-image: url(img/sky01.jpg);
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

/*メニューボタン*/
.menu{
  margin: 0 auto;
  width: 900px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  }

.menu-button{
  display: flex;
  justify-content: center;
  width: 35%;
  height: 50px;
  background-color: #fff;
  border-radius: 10px;
  margin: 5px 50px;
  font-weight: bold;
  font-size: 25px;
  opacity: 0;
  transition-duration: 0.5s;
  transition-property: opacity, transform;
}
.menu-button p{
}

.menu-button img{
  width: 40px;
  height: 40px;
}

.btn{
  transform: translate(0, 50px);
}

.txt{
  transform: translate(-50px, 0); 
}

.is-scrollIn {
  opacity: 1 !important;
  transform: translate(0, 0);
}
/*テキスト*/
.textspace{
  margin: 0 auto;
  padding: 50px 10px;
  width: 900px;
}
.text{
  margin: 0 auto;
  width: 700px;
}

.fadein{
  line-height:400%;
  opacity: 0;
  transition-duration: 0.5s;
  transition-property: opacity, transform;

}  
/*フッター*/
footer{
  background-color: gray;
  color: #fff;
  padding: 30px 30px;
}
footer h6{
  text-align: center;
}

/*----スマホ画面-----*/
@media screen and (max-width: 480px) {
  .top{
    height: 220px;
  }
  .top-left{
    width: 30%;
    position: absolute;
    top: 25%;
    left: 15%;
    z-index: 10;
}
.top-left img{
    width: 100%;
}
.top-center{
    width: 50%;
    position: absolute;
    top: 20%;
    left: 35%;
    z-index: 1;
}
.top-center img{
    width: 60%;
}
.top-right{
    width: 30%;
    position: absolute;
    top: 25%;
    right: 15%;
    z-index: 10;
}
.top-right img{
    width: 100%;
}
@keyframes neko {
  0% {
      transform: translate(0,0px);
  }

  100% {
      transform: translate(0,-30px)
  }
}

/*カバー*/
.cover{
  background-image: url(img/sky01.jpg);
  background-size: cover;
  background-attachment: scroll;
  color: #fff;
}

/*メニュー*/
.menu{
  width: 100%;
  display: block;
}
.menu-button{
  width: 95%;
  margin: 10px auto;
}

}

/*テキスト*/
.textspace{
width: 100%;
}
.text{
width: 80%;
margin: 0 auto;
}
iframe{
  width: 80%;
}