body{
    width:100%;
    height:100%;
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;

}

#mock{
    background: url(../images/モック_03.png) no-repeat;
    background-size: 100%;
    width:100%;
    height:100%;
    position: absolute;
    opacity:0.3;
    display: none;
}
#wrapper{
    position: absolute;
    margin: 0;
    height:100%;
    width:100%;
}
#header{
    background-color: orange;
    width:100%;
    height: 7%;
    position: relative;
}
#header .img1{
    width:15%;
    opacity: 0.7;
    position: absolute;
    top:0px;
    right:30%;
}
#header .img2{
    width:15%;
    position: absolute;
    top:-10px;
    right:15%;
}
#header .img3{
    width:15%;
    position: absolute;
    top:0px;
    right:0;
    //opacity: 0.7;
    background-color:white;
    top:-50px;
}
h1{
    font-size:6em;
    margin-left:40px;
    color:#fff;
    width:50%;
    height:100%;
    display: inline;
}
#header a{
    background-color: #fff;
    color:orange;
    float:right;
    font-size:4em;
    padding:2% 6%;
    height: 100%;
}
#contents_1{
    position: relative;
    width:100%;
    height:67%;
    background-color:#DEFFB3;
}
img{
    width: 70%;
    display: block;
    margin: auto;
    height: auto;

}
#footer{
    background-color:#DEFFB3;
    height:23%;
    padding-top:50px;
}
#footer p{
    font-size: 1.5em;
    box-sizing: border-box;
    color:#fff;
    padding:3% 5%;
    text-align: center;
    margin: auto;
    transition: 1s;
    border: 1px solid white;
}
#footer #a{
    font-size: 4em;
    width:60%;
    margin-bottom: 3%;
    background-color: orange;
    box-shadow: 10px 10px 5px rgba(0,0,0,0.2);
    border-radius: 100px;
    text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}
#footer #b{
    font-size: 4em;
    float:left;
    width:28%;
    margin-left:20%;
    background-color: skyblue;
    box-shadow: 10px 10px 5px rgba(0,0,0,0.2);
    border-radius: 100px;
    text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}
#footer #c{
    font-size: 4em;
    float:right;
    width:28%;
    margin-right: 20%;
    background-color: skyblue;
    box-shadow: 10px 10px 5px rgba(0,0,0,0.2);
    border-radius: 100px;
    text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}
#footer #a:hover{
    background-color: white;
    border:1px solid orange;
    color:orange;
    transition: 0.5s;
    box-sizing: border-box;
    box-shadow: 10px 10px 5px rgba(0,0,0,0.2);
    border-radius: 100px;
}
div#contents_1 img{
    animation-name: anime1;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

@keyframes anime1 {
    0% {margin-left:40px;}
    100%{margin-right:20px;}
}