@charset"UTF-8";

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

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

video{
   width:100%;
   height:280px;
}

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

body{
     display:grid;
     grid-template-columns:20px 1fr 20px;
     grid-template-rows:
                   [head]150px
                   [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:50px;

}

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

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

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

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

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

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


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

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

section.works-a{
   grid-row:sub-2;
   display:grid;
   gap:20px;
}

section.works-a a{
          font-size:16px;
          justify-self:center;
          text-align:center;
}

section.works-a p{
          font-size:12px;
}


/*=========workページの設定============*/

h2.work-1  {
   grid-row:title-2;
   font-size:18px;
   justify-self:center;
}

section.work-1{
   grid-row:sub-2;
   display:grid;
   gap:20px;
}

h3.work-1{
           font-size:21px;
           font-weight:300;
           text-align:right;
}

h4.work-1{
           font-size:16px;
           font-weight:300;
}


/*=========workページの設定============*/


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


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

article.about{
   font-size:12px;
}

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


/*=========ページトップの設定============*/

.pagetop{
   text-align: right;
   font-size:10px;
}

article.gaiyou p{
   font-size:14px;
   color:#666666;
}



/*============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]150px
                   [title-1]auto
                   [sub-1]auto
                   [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:100px;
   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;
}

section.works-a a{
          font-size:12px;
          justify-self:center;
          text-align:center;
}

section.works-a p{
          font-size:10px;
}

/*=========workページの設定============*/
h2.work-1  {
   font-size:25px;
}

/*=========workページの設定============*/



/*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版の設定ここまで============*/