@charset "utf-8";

/**
 * ***************************************
 * ページ全体に関わるCSSの設定
 * ***************************************
 */
html *,
::before,
::after {
  box-sizing: border-box;
}
/* フォント */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
body {  
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400; /* Noto Sans JPのレギュラーウェイトを指定 */
}
/* おもな太字タグのフォントウェイト設定 */
h1, h2, h3, h4, h5, h6, th, strong {
  font-weight: 700;
}

/* ベースのリンクカラー */
a {
  color: #f30;
}
p{margin: 0;}

/* レスポンシブイメージと画像下スペース防止 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}
/*アンダーライン（黄色）*/
mark {
  background: linear-gradient(transparent 70%,#ffff7c 70%);
}
/*----------------------ここまで--------------------*/
.header-container {
  width:100%;
  background-color: #163b67;
  text-align: center;
  position: fixet; /*リンクがある時はfixedを使用できないabsolute*/
}

.head-logo{/*ヘッダーの飾り画像------------*/
  background: url(../images/post-bg.svg) repeat-x;
 /* max-width: 800px;*/
  margin: 0 auto;
}
@media(min-width:768px){
  .head-logo{/*ヘッダーの飾り画像------------*/
    background: url(../images/post-bg.svg) repeat-x;
    max-width: 900px;
    margin: 0 auto;
  }
}

.daiji{/*moto-h1*/
  color:white;
  font-size: 1.4rem;
  padding-top: 20px;
  margin-top: 0;
  margin-bottom:0 ;
}
h2{
  font-size: 1.3rem;
}
h3{
  font-size: 1.2rem;
}

@media(min-width:768px){
  h1{font-size: 1.5rem;}
  h2{font-size: 1.4rem;}
}
.time-stamp {
  color:white;
  text-align: right;
  margin-top: 0;
  padding-right: 30px;
}
@media(min-width:768px){
  main{
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 220px ;
  column-gap: 10px;  
  }
  aside{
  margin:50px auto;
  padding: 10px;
  border-left: 2px solid  rgb(233, 233, 233);
  }
}

 aside{
  margin:20px 10px;
 }

.main-container{
  margin: 20px 10px ;
  background-image: url(../images/bg025.gif);
}
@media(min-width:768px){
  .main-container {
     max-width: 800px;
     margin: 0 auto;
     padding: 20px 20px 40px 20px;
 } 
}
/* bordの記述の部分------------------*/
.imgbord{
  display:block;
  text-align: center;
}
@media(min-width:768px){
  .imgbord{
    float: left;
  }
}

/*displayflex----------------------------------*/
.disp-flex{
  display: flex;
  margin: 10px 10px 20px;
  border: #737374 solid 2px;
  padding: 10px;
}
.disp-flex img{     /*image画像の大きさや位置を指定しておく*/
  width: 70px;
  height: 70px;
  margin: auto;
  margin-right: 10px;
}
/*floatleft-----------------------------------*/
.disp-float{
  float: left;
}
.kakomi{
  margin: 10px 10px 20px;
  border: #737374 solid 2px;
  padding: 10px;
}
.forkimg{
  
  margin-right: 10px;
  margin-bottom: 10px;
}
.bordimg{
  margin-right: 10px;
  margin-bottom: 15px;
  border: solid 2px rgb(184, 183, 183);
  box-shadow: 4px  4px 4px 0 rgb(174, 173, 173);/*画像に影を入れる*/
}
.clear {
 /*一旦回り込みを解除する*/
  clear: both;   
}
/*displaygrid----------------------------------*/
.disp-grid{
  display: grid;
  grid-template-columns: 70px 1fr;
  column-gap: 10px;
  row-gap: 10px;
  align-items: center;
}

/*--------------footer--------------------------*/
.footer-container {
  width:100%;
  background-color: #163b67;
  color:white;
  text-align: center;
  padding:20px 20px ;
}
  small{font-size: 100%;}

 @media(min-width:768px){  
  small{font-size: 80%;}
 }

/*--------------------------------------------*/
   pre { 
  height: 180px;
  max-width: 600px;
  margin: 10px auto;
  padding: 0.5em;
  border-radius: 3px;
  background: #b8c3d2;
  color: #fff;
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
   }
   .right{font-size: 0.8rem;}

   .aside-footer{
    display:block;
    display: none;
    }

   @media(min-width:768px){  
   .aside-footer{
    display: block;
    font-size: 0.8rem;
    text-align: center;
    background-color: navy;
    color:white;
    padding:5px;
    }
   }
   /*--------------- データベース表示の部分 --------------*/
   .gyoukan{color:blue;}
   .hava{color:blue}
   .hava2{color:blue}

   .hava1 ,.hava, .hava2, .gyoukan{
     font-size: 130% ;
   }
  
   #font_b , #font_c , #font_d{
     font-size: 130%;
   }

   @media(min-width:768px){ 
    .hava1 ,.hava, .hava2, .gyoukan{
      font-size: 100% ;
    }
   
    #font_b , #font_c , #font_d{
      font-size: 100%;
    } 
   }
   /*---------------------------------------------------*/

   .img-block{display:block}
   .st-logo{text-align: center;}
   .edge{margin-top: 10px;}
   .chrome{
    margin-top: 10px;
    margin-bottom: 10px;
   }
    /* ここからgrid のcss　--------------------------*/
   .main-grid{
    display:grid;
    grid-template-columns: 90px 1fr;
    grid-auto-rows: minmax(50px,auto);
    column-gap: 5px;
    row-gap: 5px;
    margin-left: 10px;
   }
   .sub-grid1{
    justify-self: center;
    align-self: center;
   }
   .sub-grid2{
    align-self: center;
    justify-self: start;    
   }
   .cs-blue{
    color: blue;
   }