/*
Theme Name: test theme html
Theme URI:
Author: 
Author URI: 
Description:
Version: 
*/


@charset "UTF-8";

/*共通部分--------------------------------*/
html{
    font-size:100%;
}
body{
    font-family: "Cardo", "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
    background-color: #fff;
    color:#432
}
a{
    text-decoration:none;
    color:#432
}
img{
    max-width:100%
}
h1{
    font-size: 20px; 
    text-align: left;
    margin-left:10% ;
}

/*背景
.cover{
    background-size:cover;
    background-position:center bottom;
    height:
}
.cover-home{
    background-image:url(images/index/background.png)
}
*/

/*ヘッダー*/
.page-header{
    padding-top:.5rem;
}
.logo{
    width:300px;
    margin:auto;
    display: block;
}
.font-nav{
    font-weight:normal;
}
.main-nav{
    display:flex;
    justify-content:center;
    gap:2.5rem;
    font-size:16px;
    list-style:none;
}
.main-nav a{
    color:#432;
}
.main-nav a:hover{
    color:#0bd;
}

 /*フッター*/
 .page-footer{
        padding-top: 5rem;
 }
 .footer-logo{
    width:150px;
    margin:auto;
    display: block;
 }

 /*コピーライト*/
 .copylight{
    text-align:center;
    padding:1rem;
    margin-top:1rem;
    font-size:16px;
 }


/*レイアウト*/
.wrapper{
    max-width:90%;
    margin:auto;
    padding:0 1.5rem;
}
.align-center{
    text-align:center;
}
.container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:5px;
}

/*About*/
.container-about{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
 }

.image-profile{
    width:100px;
}
 
 

/*デスクトップ版--------------------------------*/
@media(min-width:800px){
    /*ヘッダー*/
    .page-header{
        display:flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1.5rem;
        margin:.5vw 5vw
    }
    .logo{
        width:400px;
        margin:auto;
        display: block;
    }
    .main-nav{
        font-size:20px;
        display:flex;
        justify-content:flex-end;
        gap:2.5rem;
        list-style:none;
    }

    /*背景
    .cover-home{
        background-image:url(images/index/background_desktop.png)
    }
    */

    /*レイアウト*/
    h1{
        font-size: 150%; 
        text-align: left;
        margin-left:20% ;
    }
    .wrapper{
        max-width:60%;
        margin:auto;
        padding:0 1.5rem;
    }
    .container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 10px;
    }
    

    /*フッター*/
    .page-footer{
        padding-top: 1.5rem;
    }
    .footer-logo{
        width:200px;
        margin:auto;
        display: block;
     }
    
     /*コピーライト*/
     .copylight{
        text-align:center;
        padding:1rem;
        margin-top:1rem;
        font-size:20px;
     }
    
     /*About*/
     .container-about{
        display: flex;
        justify-content: space-between;
        gap: 10px;
     }

     .image-profile{
        width:200px;
     }
}