@charset"UTF-8";

/*基本設定*/
*{
   margin:0;
}

img{
   width:100%;
   height:auto;
}


/*ページ全体の設定*/

body{
     display:grid;
     grid-template-columns:20px 1fr 20px;
     grid-template-rows:
                   [head]200px
                   [title-1]auto
                   [sub-1]auto
                   [title-2]auto
                   [sub-2]auto
                   [title-3]auto
                   [sub-3]auto
                   [title-4]auto
                   [sub-4]auto
                   [recent]auto
                   [foot]100px;
     grid-row-gap:20px;
     row-gap:20px;
     font-family:'ヒラギノ角ゴ',Hiragino Kaku Gothic Pro,sans-selif;
}


/*パーツの配置*/
body>*{
       grid-column:2 / -2;
}


/*ヘッダー*/
header{
   grid-row:head;
   justify-self:center;
   align-self:center;
   font-size:45px;

}

/*ナビゲーションメニュー*/
nav{
   grid-row:head;
   justify-self:center;
   align-self:end;
   text-align:center;
}

nav p{
      font-size:16px;
      color:#666666;
      border-bottom:solid 1px #666;
}

nav ul{
        font-size:16px;
        list-style-type:none;
        padding:0;
        display: grid;
        grid-auto-flow: column;
}

/*一級建築士事務所*/
ol{
   list-style-type:none;
   padding:0;
   grid-row:head;
   justify-self:center;
   position:relative;
   top:120px;
   font-size:12px;
}

/*topc*/
h2.topic {
   grid-row:title-1;
   font-size:16px;
   color:#666666;
}
ul{
   grid-row:sub-1;
   font-size:12px;
}

/*works-a*/
h2.works-a {
   grid-row:title-2;
   font-size:16px;
}
a{
   color:#666666;
   text-decoration:none;
}

nav ul a:hover{
   color:#f72727;
   text-decoration:none;
}

section.works-a{
   grid-row:sub-2;
}

figcaption{
   text-align:center;
   font-size:14px;
}

/*works-s*/
h2.works-s {
   grid-row:title-3;
   font-size:16px;
}


/*about*/
h2.about {
   grid-row:title-4;
   font-size:16px;
   color:#666666;
}
aside{
   grid-row:sub-4;
   font-size:12px;
}
h5{
   font-size:14px;
   color:#666666;
}



/*フッター*/
footer{
   grid-row:foot;
   font-size:10px;
   justify-self:end;
}


/*============PC版の設定============*/

@media(min-width:1000px){


/*PC版：ページ全体の設定*/
body{
    grid-template-columns:
                  0.2fr  repeat(6,1fr)  0.2fr;
    grid-column-gap: 5%;
    column-gap: 5%;
    grid-template-rows:
                   [head]250px
                   [title-1]auto
                   [sub-1]100px
                   [title-2]auto
                   [sub-2]auto
                   [recent-0]100px
                   [title-3]auto
                   [sub-3]auto
                   [recent-00]100px
                   [title-4]auto
                   [sub-4]auto
                   [recent]auto
                   [foot]100px;
    grid-row-gap: 1%;
}



/*PC版：ヘッダー*/
header{
       font-size:65px;
       font-weight:500;
}


/*PCナビゲーションメニュー*/
nav{
   grid-row:head;
   justify-self:right;
   align-self:center;
   text-align:center;
}

nav p{
      font-size:18px;
      border-bottom:solid 1px #666;
}

nav ul{
        font-size:18px;
        list-style-type:none;
        padding:0;
}


/*PC一級建築士事務所*/
ol{
   list-style-type:none;
   padding:0;
   grid-row:head;
   justify-self:center;
   position:relative;
   top:150px;
   font-size:14px;
}



/*PC版topic*/
h2.topic{
   font-size:18px;
   font-weight:200;
}
ul{
   grid-row:sub-1;
   font-size:14px;
}

/*PC版works-a*/
h2.works-a{
   font-size:18px;
   font-weight:200;
}

section.works-a{
        grid-row:sub-2;
        display:grid;
        grid-template-columns:1fr 1fr 1fr 1fr;
        grid-gap:10px 10px;
        gap:10px 10px;
}

/*PC版works-s*/
h2.works-s{
   font-size:18px;
   font-weight:200;
}



/*PC版about*/
h2.about{
   font-size:18px;
   font-weight:200;
}

h5{
   font-size:12px;
}


}
/*============PC版の設定ここまで============*/