@media(max-width:750px){
body{
  position:relative;
  background-color:rgba(240,255,240,0.3);
  width:750px;
  height:100%;
}

a.top{
  position:absolute;
  top:0px;
}

a.form{
  position:absolute;
  top:100px;
}

a.sponsor{
  position:absolute;
  top:200px;
}

a.gallery{
  position:absolute;
  top:300px;
}

a:link{
  color:#505050;
}
a:visited{
  color:#000000;
}

canvas.phone{
  position:fixed;
  left:0px;
  top:0px;
  opacity:0.9;
  z-index:2;
}
canvas.back{
  display:none;
}

.ask{
  position:fixed;
  font-family:sans-serif;
  font-size:45px;
  font-weight:bold;
  top:450px;
  left:130px;
  color:#000000;
  z-index:4;
}

.video{
  position:fixed;
  font-family:sans-serif;
  font-weight:bold;
  font-size:50px;
  top:200px;
  left:170px;
  color:#000000;
  z-index:4;
}

img.feslogo{
  position:fixed;
  top:0px;
  left:0px;
  width:150px;
  z-index:3;
}

h1{
  position:fixed;
  left:300px;
  bottom:0px;
  font-size:15px;
  color:#000000;
}

button.bargar{
  position:fixed;
  top:10px;
  right:10px;
  background-color:rgba(205,205,205,0.5);
  width:80px;
  height:80px;
  z-index:5;
  border:1px solid;
  border-radius:30px;
}
.bar{
  position:absolute;
  top:0px;
  left:20px;
  width:40px;
  height:2px;
  background-color:#000000;
}
.bar1{
  top:20px;
}
.bar2{
  top:35px;
}

.bar3{
  top:50px;
}
.hunback{
  position:fixed;
  top:0px;
  left:0px;
  width:650px;
  height:2000px;
  background-color:rgba(200,200,200,0.98);
  display:none;
  z-index:4;
}

ul{
  position:fixed;
  top:150px;
  left:30%;
  color:#000000;
  font-family:sans-serif;
  font-size:30px;
  font-weight:bold;
  list-style:none;
  display:none;
  z-index:5;
}

.btn,
a.btn{
  font-size:0.7rem;
  font-weight:700;
  line-height:1.5;
  top:300px;
  position:fixed;
  display:inline-block;
  padding:1rem 4rem;
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-transition:all 0.3s;
  transition:all 0.3s;
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
  letter-spacing:0.1em;
  color:#212529;
  border-radius:0.5rem;
  z-index:3;
}

a.btn-flat1 {
  left:150px;
  overflow:hidden;
  padding:1.5rem 6rem;
  color:#fff;
  border-radius:0;
  background:#000;
}

a.btn-flat1 span {
  position: relative;
}

a.btn-flat1:before {
  position: absolute;
  top: 0;
  left: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

a.btn-flat1:after {
  position: absolute;
  top: -400%;
  right: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

a.btn-flat1:hover:before {
  -webkit-transform: rotate(45deg) translateX(0) translateY(-50%);
  transform: rotate(45deg) translateX(0) translateY(-50%);
}

a.btn-flat1:hover:after {
  -webkit-transform: rotate(45deg) translateX(0) translateY(50%);
  transform: rotate(45deg) translateX(0) translateY(50%);
}

a.btn-flat2 {
  left:150px;
  top:600px;
  overflow:hidden;
  padding:1.5rem 6rem;
  color:#fff;
  border-radius:0;
  background:#000;
}

a.btn-flat2 span {
  position: relative;
}

a.btn-flat2:before {
  position: absolute;
  top: 0;
  left: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

a.btn-flat2:after {
  position: absolute;
  top: -400%;
  right: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

a.btn-flat2:hover:before {
  -webkit-transform: rotate(45deg) translateX(0) translateY(-50%);
  transform: rotate(45deg) translateX(0) translateY(-50%);
}

a.btn-flat2:hover:after {
  -webkit-transform: rotate(45deg) translateX(0) translateY(50%);
  transform: rotate(45deg) translateX(0) translateY(50%);
}

}

@media (min-width:750px){

*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
}

body{
  position:relative;
  background-color:rgba(240,255,240,0.3);
  width:100%;
  height:100%;
}
ul{
  position:fixed;
  top:700px;
  right:0px;
  color:#000000;
  font-family:sans-serif;
  font-size:30px;
  font-weight:bold;
  list-style:none;
  z-index:4;
}

a.top{
  position:absolute;
  right:800px;
}

a.form{
  position:absolute;
  right:600px;
}

a.sponsor{
  position:absolute;
  right:350px;
}

a.gallery{
  position:absolute;
  right:150px;
}

a{
  text-decoration:none;
}

a:link{
  color:#505050;
}
a:visited{
  color:#000000;
}

canvas.back{
  position:fixed;
  left:0px;
  top:0px;
  opacity:0.9;
  z-index:2;
}
canvas.phone{
  display:none;
}

.advice{
  position:fixed;
  font-family:sans-serif;
  font-size:20px;
  font-weight:bold;
  top:650px;
  left:780px;
  color:#000000;
  z-index:4;
}

.ask{
  position:fixed;
  font-family:sans-serif;
  font-size:50px;
  font-weight:bold;
  top:100px;
  left:1480px;
  color:#000000;
  display:block;
  z-index:4;
}

.video{
  position:fixed;
  font-family:sans-serif;
  font-weight:bold;
  font-size:50px;
  top:100px;
  left:700px;
  color:#000000;
  display:block;
  z-index:4;
}

.panfret{
  position:fixed;
  font-family:sans-serif;
  font-weight:bold;
  font-size:50px;
  top:100px;
  left:1000px;
  color:#000000;
  display:block;
  z-index:4;
}

img.feslogo{
  position:fixed;
  top:10px;
  left:50px;
  width:250px;
  height:180px;
  z-index:3;
}

img.panfret1{
  position:fixed;
  top:100px;
  left:550px;
  height:60%;
  display:none;
}
img.panfret2{
  position:fixed;
  top:100px;
  left:1000px;
  height:60%;
  display:none;
}

h1{
  position:fixed;
  left:1600px;
  top:850px;
  font-size:15px;
  color:#000000;
}

button.bargar{
  display:none;
}

button.btn{
  position:fixed;
  border:none;
  display:block;
  z-index:5;
}

.btn,
a.btn{
  font-size:1.6rem;
  font-weight:700;
  line-height:1.5;
  top:300px;
  position:fixed;
  display:inline-block;
  padding:1rem 4rem;
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-transition:all 0.3s;
  transition:all 0.3s;
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
  letter-spacing:0.1em;
  color:#212529;
  border-radius:0.5rem;
  z-index:5;
}

a.btn-flat1 {
  left:700px;
  overflow:hidden;
  padding:1.5rem 6rem;
  color:#fff;
  border-radius:0;
  background:#000;
}

a.btn-flat1 span {
  position: relative;
}

a.btn-flat1:before {
  position: absolute;
  top: 0;
  left: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

a.btn-flat1:after {
  position: absolute;
  top: -400%;
  right: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

a.btn-flat1:hover:before {
  -webkit-transform: rotate(45deg) translateX(0) translateY(-50%);
  transform: rotate(45deg) translateX(0) translateY(-50%);
}

a.btn-flat1:hover:after {
  -webkit-transform: rotate(45deg) translateX(0) translateY(50%);
  transform: rotate(45deg) translateX(0) translateY(50%);
}

a.btn-flat2 {
  left:1500px;
  overflow:hidden;
  padding:1.5rem 6rem;
  color:#fff;
  border-radius:0;
  background:#000;
}

a.btn-flat2 span {
  position: relative;
}

a.btn-flat2:before {
  position: absolute;
  top: 0;
  left: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

a.btn-flat2:after {
  position: absolute;
  top: -400%;
  right: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

a.btn-flat2:hover:before {
  -webkit-transform: rotate(45deg) translateX(0) translateY(-50%);
  transform: rotate(45deg) translateX(0) translateY(-50%);
}

a.btn-flat2:hover:after {
  -webkit-transform: rotate(45deg) translateX(0) translateY(50%);
  transform: rotate(45deg) translateX(0) translateY(50%);
}
}

button.btn-flat3 {
  left:1100px;
  overflow:hidden;
  padding:1.5rem 6rem;
  color:#fff;
  border-radius:0;
  background:#000;
}

button.btn-flat3 span {
  position: relative;
}

button.btn-flat3:before {
  position: absolute;
  top: 0;
  left: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

button.btn-flat3:after {
  position: absolute;
  top: -400%;
  right: calc(-150% + 50px);

  width: 150%;
  height: 500%;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);

  background: #fff100;
}

button.btn-flat3:hover:before {
  -webkit-transform: rotate(45deg) translateX(0) translateY(-50%);
  transform: rotate(45deg) translateX(0) translateY(-50%);
}

button.btn-flat3:hover:after {
  -webkit-transform: rotate(45deg) translateX(0) translateY(50%);
  transform: rotate(45deg) translateX(0) translateY(50%);
}