@charset "UTF-8";

  /*基本設定*/


* {
   margin: 0;
}

img {
   width: auto;
   height: 25px;
}

  /*ページ全体の設定*/
body {
   display: grid;
   grid-template-columns: 20px 1fr 20px;
   grid-template-rows: 
                 [head] 70px 
                 [menu] auto 
                 [recent] auto
                 [foot] 100px;
   grid-row-gap: 20px;
   row-gap: 20px;
   font-family: 'Meiryo UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Arial',sans-serif;
   color:  #500000;
   background-color: #d8d0b8;
   line-height: 25px; 
   text-size-adjust: none;
}

a {
   text-decoration: none;
}

a:link {
   color: #556b2f;
}

a:visited {
   color: #af6050;
}

a:active {
   color: #354b0f;
}
  /*パーツ配置*/
body > * {
   grid-column: 2 / -2;
}  

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

  /*メニュー*/
nav {
   grid-row: menu;
   justfy-self: center;
   align-self: end;
   padding-left: 30px;
}

nav ul {
   list-style-type: none;
   padding: 0;
   display: grid;
   grid-auto-flow: column;
   glid-column-gap: 20px;
   column-gap: 20px;
}

nav a{
   font-size: 14px;
   font-weight: bold;
}

  /*記事*/
section {
   grid-row: recent;
   
}

h1 {
   font-size: 25px;
   text-align: center;
   margin-top: 20px;
}

p {
   text-align: center;
}

article {
   margin: 20px 0;
}

article p {
   text-align: left;
}

h2 {
   margin-bottom: 10px;
   margin: 10px 0;
   font-size: 20px;
   border-bottom: 3px double #af6050;
}

h3 {
   font-size: 18px;
   margin: 15px 0;
}

h4 {
   font-size: 15px;
   margin: 5px 0;
   border-bottom: 1px dotted #af6050;

}
  /*フッター*/
footer {
   grid-row: foot;
   justify-self: center;
   align-self: center;
   font-size: 12px;
}
  /*テーブル設定*/
table {
      margin: 0 auto;
      width: 80%;
      text-align: center;
      border-collapse: collapse;
      border-radius: 10px;
}

.log {
     width: 100%;
     
}

.fav {
     width: 100%;
}


table th{      /*見出しセル*/
         padding: 15px;
         border-bottom: solid 2px #af6050;
         border-right: solid 1px #af6050;
}

table td{       /*小セル*/
         padding: 5px 10.5px;
         border-right: solid 1px #af6050;
         border-bottom: dashed 1px #af6050;
}

table tr th:last-of-type{  /*見出し端っこ*/
         border-right: none 1px #af6050;
}
table tr td:last-of-type{  /*小セル端っこ*/
         border-right: none 1px #af6050;
}

table tr:last-child td {  /*小セル下端*/
         border-bottom: none 1px #af6050;
}


  /*pc版設定*/
@media (min-width: 768px){

body {
   display: grid;
   grid-template-columns: 0.5fr repeat(6,1fr) 0.5fr;
   grid-column-gap: 5%;
   column-gap: 5%;
}


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

  /*ヘッダー*/
header {
   grid-row: head;
   justify-self: start;
}

  /*メニュー*/
nav {
   grid-row: head;
   justfy-self: end;
   align-self: center;
   grid-column: 5 /span 2;
}

  /*記事*/
section {
   grid-column: 3 /span 4;
}

}
  /*PC版設定此処まで*/