@charset "utf-8";


header{
    text-align: center;
}

main{
    text-align: center;

}

footer{
    text-align: center;
}

h1{
    color: darkorange;
    font-style: normal;
}

h3{
    margin-bottom: 10px;
    }

a{
    color: coral;
    text-decoration: none;
}

a:hover{
    color: aqua;
    text-decoration: none;
}


.btn a{
    background-color: coral;
    color: aliceblue;
    font-size: 30px;
    width: 700px;
    display: block;
    text-align: center;
    margin: auto;
    border-radius: 5px;
    border: 3px solid coral;
}

.btn a:hover{
    background-color: white;
    color: coral;
    font-size: 30px;
    width: 700px;
    display: block;
    text-align: center;
    margin: auto;
    border-radius: 5px;
    border: 3px solid coral;
}

@media screen and (max-width:1300px){
    /*　画面サイズが1300px以下の場合に適用*/


header{
    text-align: center;
    width:1200px;
    margin: auto;
}

main{
    text-align: center;
    width:1200px;
    margin: auto;
}

footer{
    text-align: center;
    width:1200px;
    margin: auto;
}


    
h1{
    font-size: 100px;    
    }

    
h2{
    font-size: 60px;   
    }
    
h3{
    font-size: 60px; 
    margin-bottom: 10px;
    }
    
p{
    margin: 10px;  
    padding: 10px;
    font-size: 40px;
}

.btn a{
    background-color: coral;
    color: aliceblue;
    font-size: 70px;
    width: 800px;
    display: block;
    text-align: center;
    margin: auto;
    border-radius: 5px;
    border: 3px solid coral;
}

.btn a:hover{
    background-color: white;
    color: coral;
    font-size: 70px;
    width: 800px;
    display: block;
    text-align: center;
    margin: auto;
    border-radius: 5px;
    border: 3px solid coral;
}
}