body {
    background-image: url(/imgs/background3.png);
    background-attachment: fixed;
    background-size: 340px, 200px;
    margin: 0;
    color:#3a3a3a;
}

.kosugi-maru-regular {
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.oswald {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.courgette-regular {
    font-family: "Courgette", cursive;
    font-weight: 400;
    font-style: normal;
}

#page-top{
    height: 100px;
}

#logo {
    height: 50px;
    padding:5px;
    position: fixed;
    top: 0px;
    z-index: 999;
}

#logo img{
    height: 50px;
}

#menu_top * {
    -webkit-transition-property: all;
    -webkit-transition-duration: .2s;
    -moz-transition-timing-function: cubic-bezier(100,50,21,6);
    -moz-transition-property: all;
    -moz-transition-timing-function: cubic-bezier(100,50,21,6);
  }
  
#menu_top{
    background:#7e7ec6;
    padding:25px;
    width: 100%;
    text-align:center;
    font-family: 'Oswald', sans-serif;
    position: fixed;
    top: 0px;
}

#menu_top .btn{
    color:#999;
    background:rgba(0, 0, 0, 0.5);
    padding:10px 20px;
    font-size:12px;
    text-decoration:none;
    letter-spacing:2px;
    text-transform:uppercase;
}

#menu_top .btn:hover{
    border:none;
    background:rgba(0, 0, 0, 0.4);
    background:#fff;
    padding:20px 20px;
    color:#1b1b1b;
}

#contents{
    width:700px;
    margin: auto;
    margin-bottom: 200px;;
}


#footer{
    background:#7e7ec6;
    padding:10px 10px;
    width: 100%;
    position: fixed;
    bottom: 0;
}

#footer{
    display:flex;
}

#footer a{
    text-align:center;
    font-size:15px;
    color:#fff;
    clear:both;
    display:block;
    letter-spacing:5px;
    border:1px solid #fff;
    /* padding:10px; */
    padding: 0px;
    text-decoration:none;
    width:300px;
    /* margin:auto; */
    margin:auto auto 10px auto;
    align-items: center;
    /* height: 20px; */
    display:flex;
}

#footer a:first-of-type {
    margin:auto 5px 10px auto;
}

#footer a:last-of-type {
    margin:auto auto 10px 5px;
}


@media screen and (-webkit-min-device-pixel-ratio: 2.0) {
	/* ピクセル密度2.0以上 =【xxdpi（超超高解像度）】の指定 */
    #footer a{
        height: 120px;
    }
    #footer .icon{
        height: 60px; 
        margin:auto 30px auto auto;
    }
}
@media screen and (-webkit-max-device-pixel-ratio: 2.0) {
	/* ピクセル密度2.0以下 =【xdpi（超高解像度）】の指定 */
    #footer a{
        height: 80px;
    }
    #footer .icon{
        height: 40px; 
        margin:auto 20px auto auto;
    }
}
@media screen and (-webkit-max-device-pixel-ratio: 1.5) {
	/* ピクセル密度1.5以下 =【hdpi（高解像度）】の指定 */
    #footer a{
        height: 60px;
    }
    #footer .icon{
        height: 30px; 
        margin:auto 15px auto auto;
    }
}
@media screen and (-webkit-max-device-pixel-ratio: 1.0) {
	/* ピクセル密度1.0以下 =【mdpi（中解像度）】の指定 */
    #footer a{
        height: 40px;
    }
    #footer .icon{
        height: 20px; 
        margin:auto 10px auto auto;
    }
}
@media screen and (-webkit-max-device-pixel-ratio: 0.75) {
	/* ピクセル密度0.75以下 =【ldpi（低解像度）】の指定 */
    #footer a{
        height: 20px;
    }
    #footer .icon{
        height: 10px; 
        margin:auto 5px auto auto;
    }
}

#footer .icon_text{
    margin:auto auto auto 0px;
}