@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body{
margin:0;
padding:0;
font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@media screen and (min-width:737px) {
h1{margin:0 auto; width:320px; text-align:center; height:100px; padding-top:50px;}
.contents_area{background-color: #f4f4f4; height:1000px;}
.main_contents{width:650px; margin:0 auto; text-align: center; padding-top:10px;}
.main_contents p{font-size:1.2rem; color:#474747; line-height:2rem;}
.mail_box{border:solid 1px #999; width:650px; margin:0 auto; padding:20px;}
.mail_box p{font-size:1rem; color:#474747; line-height:2rem;}
.cf{clear:both;}
.bold{font-weight: bold;}
.button{background-color:#d31b20; width:250px; margin:0 auto;}
.button a{margin-top:50px; text-decoration:none; color:#FFF; display: block; padding:10px 0;}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #000;
    height:70px;
}
#footer p{padding-top:8px; color:#999; font-size:0.6rem; text-align: center;}
}

@media screen and (min-width:356px) and ( max-width:736px){
h1{margin:0 auto; width:50%; text-align:center; height:80px; padding-top:20px;}
.contents_area{background-color: #f4f4f4; height:536px;}
.main_contents{width:90%; margin:0 auto; padding:0 5%; text-align: center;}
.main_contents p{font-size:1rem; color:#474747; line-height:2rem;}
.button{background-color:#d31b20; width:250px; margin:0 auto;}
.button a{margin-top:30px; text-decoration:none; color:#FFF; display: block; padding:10px 0;}
.bold{font-weight: bold;}
#footer {
    width: 100%;
    background-color: #000;
    height:100px;
}
#footer p{padding-top:18px; color:#999; font-size:0.5rem; text-align: center; margin:0;}
.mail_box{border:solid 1px #999; width:90%; margin:0 auto; padding:5%;}
.mail_box p{font-size:0.8rem; color:#474747; line-height:2rem;}
}


@media screen and (min-width:320px) and ( max-width:355px){
    h1{margin:0 auto; width:50%; text-align:center; height:60px; padding-top:20px;}
    .contents_area{background-color: #f4f4f4; height:400px;}
    .main_contents{width:90%; margin:0 auto; padding:0 5%; text-align: center; padding-top:10px;}
    .main_contents p{font-size:0.8rem; color:#474747; line-height:2rem;}
    .mail_box{border:solid 1px #999; width:96%; margin:0 auto; padding:2%;}
    .mail_box p{font-size:0.7rem; color:#474747; line-height:1.5rem;}
    .bold{font-weight: bold;}
    .button{background-color:#d31b20; width:250px; margin:0 auto;}
    .button a{margin-top:30px; text-decoration:none; color:#FFF; display: block; padding:10px 0;}
    #footer {
        width: 100%;
        background-color: #000;
        height:100px;
    }
#footer p{padding-top:20px; color:#999; font-size:0.5rem; text-align: center; margin:0;}
}