/* CSS Document */

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
h1{
    text-align: center;
    font-size: 48pt;
}
h2{
    text-align: center;
    font-size: 38pt;
}
h3{
    text-align: center;
    font-size: 28pt;
}
h4{
    text-align: center;
    font-size: 20pt;
}
h5{
    text-align: center;
    font-size: 14pt;
}
p{
    font-size: 16pt;
    line-height: 32pt;
    padding-top:20pt;
    padding-bottom:20pt;
}
a{
    text-decoration: none;
    color:#000;
    text-shadow: 4px 4px 16px #222;
}
input,textarea{
    width:50%;
    border-radius: 8px;
    height: 32pt;
    padding:8px;
    border:0;
    font-size: 20pt;
}
button{
    width:200px;
    border-radius: 8px;
    height: 40pt;
    padding:8px;
    border:0;
    font-size: 20pt;
    background-color:#0D3F68;
    color:#fff;
}
textarea{
    height: 128pt;
}
table{
    border-collapse: collapse;
}
td{
    padding:4px;
}

tbody tr:nth-child(odd) td{
    background-color: #aaa;
    border:1px solid #aaa;
}
tbody tr:nth-child(even) td{
    background-color: #ccc;
    border:1px solid #ccc;
}
thead td{
    font-weight: bold;
    background-color:#0D3F68;
    color:white;
}
/**/
article.left{
    width:33%;
    left:0;
}
article.right{
    width:66%;
    right:0;
}
/**/
#body{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
section{
    position: relative;
    width:100%;
    height:100%;
    min-height: 800px;
    padding: 100px;
}
#splash{
    background-image: url(../img/background.jpg);
    -webkit-filter: grayscale(40%) brightness(55%);
    filter: grayscale(40%) brightness(55%);
}
#overlay{
    position: absolute;
    top:0;
    left:0;
    color:white;
    text-align: center;
}
#overlay p ,#overlay h1{
    margin-top:72pt;
}
#overlay button{
    width:400px;
    height:100px;
    color:#fff;
    font-size: 24pt;
    border-radius: 12pt;
    border:0;
    background-color:#0D3F68;
    box-shadow: 0 0 20px 5px rgba(255,255,255,0.4);
}
#overlay img{
    width:64px;
    height:64px;
    position: absolute;
    left:32px;
    top:32px;
}

#intro{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:#ddd;
}

#works,#hobby,#contact{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:#ccc;
}
#hobby{background-color:#ddd;}
#works .right,#hobby .right{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-wrap: wrap;
}
#works .right .works{
    width:33%;
    height:300px;
    transition: box-shadow 0.2s;
    -webkit-transition: box-shadow 0.2s;
}
#works .right .works:hover{
    box-shadow: 0 0 40px 5px rgba(0,0,0,0.5);
    z-index: 10;
}
#works .right .works a{
    position: absolute;
    width: 33%;
	height: 300px;
}
#works h3,#hobby h3{margin-top:48px;}
#preview1{background-image:url(../img/preview1.jpg);}
#preview2{background-image:url(../img/preview2.png);}
#preview3{background-image:url(../img/preview3.jpg);}
#preview4{background-image:url(../img/preview4.png);}
#preview5{background-image:url(../img/preview5.jpg);}
#preview6{background-image:url(../img/preview6.png);}

#hobby .right .hobby{
    width:33%;
    height:600px;
    transition:box-shadow 0.2s,background-image 0.2s ease-in-out;
    -webkit-transition:box-shadow 0.2s,background-image 0.2s ease-in-out;
}
#hobby .right .hobby:hover{
    box-shadow: 0 0 40px 5px rgba(0,0,0,0.5);
    z-index: 10;
}
#hobby1{background-image:url(../img/game/004.jpg);}
#hobby2{background-image:url(../img/jr/003.png);}
#hobby3{background-image:url(../img/research/mainmenu.png);}
#hobby1:hover{background-image:url(../img/game/002.jpg);}
#hobby2:hover{background-image:url(../img/jr/007.png);}

#footer{
    height:200px;
    min-height: 200px;
    background-color:#333;
    color:white;
    padding:80px 100px;
}
#contact p{
    padding:0;
    margin-bottom:40px;
}
@media screen and (max-width:1280px) {
    h1{font-size: 40pt;}
    h2{font-size: 30pt;}
    h3{font-size: 20pt;}
    p{
        font-size: 12pt;
        line-height: 24pt;
        padding-top:8pt;
        padding-bottom:8pt;
    }
    #overlay button{
        widtH:200px;
        height:50px;
        font-size: 12pt;
        border-radius: 4pt;
        box-shadow: 0 0 10px 2px rgba(255,255,255,0.4);
    }
    section{padding: 20px;}
    #overlay p ,#overlay h1{margin-top:64pt;}
    #works .right .works{
        width:50%;
        height:200px;
    }
    #hobby .right .hobby{
        width:80%;
        height:200px;
    }
}
@media screen and (max-width:1024px) {
    #intro,#works,#hobby,#contact{display:block;}
    #intro .left,#works .left,#hobby .left,#contact .left{
        width:100%;
        padding: 48pt 0;
    }
    #intro .right,#works .right,#hobby .right,#contact .right{
        width:100%;
    }
    input,textarea{
        width:100%;
    }
    #contact p{
        margin-bottom:20px;
    }
}