/*
    Theme Name: datomblog
    Author: datom
    Description: Learn PHP Programming
    License: GNU General Public License v2 or later
  */

@charset "UTF-8";

*{
	margin: 0;
	padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    list-style: none;
    color: #333333;
    .color1{background-color: #9cd8f6;}
    .color2{background-color: #e95884;}
    .color3{background-color: #00b4b6;}
}

header{
    text-align: center;
    top: 0;
    width: 100%;
    box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);
    position: fixed;
    background-color: #eeeeee;
    .inner{
        width: 820px;
        display: flex;
        margin: 0 auto;
        z-index: 1;
        .logo{
            width: 250px;
            height: 150px;
            float: left;
            margin: 10px;
        }
        .header-nav{
            margin: 15px 0;
            float: right;
            ul{
                width: 500px;
                display: flex;
                li{
                    font-size: small;
                    font-weight: bold;
                    justify-content: center;
                    background-color: #9cd8f6;
                    width: 100px;
                    height: 30px;
                    margin: 10px;
                    border-radius: 15px;
                    border: 5px solid #e95884;
                }
            }
            p{
                font-weight: bold;
            }
        }
    }
}

#main{
    min-height: 100zh;
    z-index: 2;
    width: 820px;
    margin: 0 auto;
    padding: 140px 0;
    img{
        width: 400px;
        margin: 10px auto;
    }
    section{
        margin-bottom: 60px;
    }
    h2{
        margin: 10px;
        text-decoration: underline double 1px #e95884;
    }
    p{
        margin: 10px 20px;
    }
    #sikaku-g{
        display: contents;
    }
    #osusume{
        h2{
            margin: 40px 20px;
        }
        .osusume{
            width: 90%;
            margin: 50px auto;

            ul{
                width: 90%;
                margin: 0 auto;
            }
        }
    }
    #contact{
        margin: 20px;
        width: 820px;
    }
}
    

footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color:  #00b4b6;
    .inner{
        width: 820px;
        margin: 0 auto;
        text-align: center;
        display: flex;
        .logo{
            width: 30%;
            .logo1{
                color: #e95884;
            }
            .logo2{
                color: #e95884;
                font-size: 80%;
            }
        }
        ul{
            display: flex;
            li{
                justify-content: center;
                background-color: #e95884;
                width: 120px;
                height: 60px;
                margin: 10px;
            }
        }
    }
    .copyright{
        text-align: center;
    }
}