body {
  margin: 0px;
  overflow-x: hidden;
    background-image:url(img/bg.jpg);
    background-repeat: repeat-y;
    background-size: cover;
    background-attachment:fixed;
}
p {
  font-family: YuMincho, "Yu Mincho", serif;
}

div{ 
    position: relative;
    margin: -13px auto;
    padding:0;
}

hr{
    color: #000;
}

a img {
			transition: 1.0s ;
		}

a img:hover {
	opacity: 0.5 ;
}

.pconly{
    display: inline-block;
}

.sponly{
    display: none;
}
#contents{
    text-align: center;
    margin: 0 auto;
    
}

img {
    max-width: 1200px;
    margin: 0;
    padding:0;
}

.footer{
    margin-top: 40px;
    margin-bottom: 20px;
}   

div a{
position: absolute;
}

.btn1{
    left: 54%;
    top:23%;
}


.btn2{    left: 21%;
    bottom:14%;
}

.btn3{
    left: 54%;
    top:40%;
}

.btn4{    left: 21%;
    top:27%;
}

.btn5{
    left: 54%;
    bottom:30%;
}


.btn6{
    right: 25%;
    bottom:7%;
}

.btn7{
    right: 25%;
    bottom:13%;
}

.btn8{
    right: 25%;
    bottom:3%;
}


@media screen and (max-width: 1200px) {
    img {width: 100%;}
    .footer img{width:initial;}
    
    a img {
                height:50px;
        width:auto;
    }
    .btn1,.btn3,.btn5 {
        left:55%;
    }  
    
    .btn6,.btn8,.btn7{
        right:10%;
    }
    
    .btn7{
    bottom: 20%;}

    .btn8{
    bottom: 13%;}
    
    .btn2,.btn4 {
        left:5%;
    }  
}



@media screen and (max-width: 750px) {
.pconly{
    display: none;
}

.sponly{
    display: block;
}
    
  .btn1,.btn2,.btn3,.btn4,.btn5,.btn6,.btn8,.btn7{
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
      right:initial;
    }
    
    
    .btn1{
    top:45%;
}


.btn2{
    bottom:1%;
}

.btn3{
    top: 80%;
}

.btn4{    
    top: 40%;
}

.btn5{    bottom: 13%;
}


.btn6{
    bottom:1%;
}

.btn7{
    bottom: 20%;
}

.btn8{
    bottom:0%;
}
    
    .btn8sp img{
     height:90px;   
    }
    
    
}