@charset "UTF-8";

/* ※ ヘッダー設定 ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※ */

/* テーブル(table)設定 ========================================================================================== */

/* table設定 ---------------------------------------------------------------------------------------------------- */
table.table-l {
  width        : 850px;
  margin-left  : auto;
  margin-right : auto;
  /* margin       : auto; */                        /* 配置指定(中央)                                             */
  table-layout : fixed;                             /* テーブル幅固定                                             */
}


/* バナー設定 =================================================================================================== */

div.banner-img {
  background-image : url(../img/VMSystem.png);      /* 画像指定                                                   */
  background-repeat: no-repeat;                     /* 画像繰り返し処理しない                                     */
  width:auto       ;                                /* 横幅のサイズを指定                                         */
  height:90px      ;                                /* 縦幅のサイズを指定                                         */ 
}


/* タイトル設定 ================================================================================================= */

span.title::before {
  content     : "『街の身近なお店』のサポーター";   /* 表示文字を指定                                             */
  display     : inline-block;                       /* 表示形式 blockとinlineの中間                               */
  font-size   : 20px;                               /* フォントサイズ                                             */
  font-weight: bold;                                /* 太文字                                                     */
}


/* 文字のスクロール ============================================================================================= */

div.scroll {
  margin      : auto;                               /* 余白指定 自動                                              */
  width       : 100%;                               /* 横幅指定 tableサイズと同じ                                 */
  font-size   : 15px;                               /* フォント(文字)サイズ                                       */
  font-weight: bold;                                /* 太文字                                                     */
  line-height : 20px;                               /* 行の高さ指定                                               */
  text-align  : center;                             /* テキスト配置 中央                                          */
  border      : 0px solid #0000ff;                  /* 枠の色・太さ                                               */
  color       : #000000;                            /* 文字色 黒                                                  */
  background  : #ffffff;                            /* 枠内の色 白                                                */
  overflow    : hidden;                             /* オーバーフロー時要素                                       */
}
div.scroll string::before {
  content     : "ホームページ作成・各種システム開発";
                                                    /* 表示文字を指定                                             */
  display     : inline-block;                       /* 表示形式 blockとinlineの中間                               */
  padding-left: 100%;                               /* 左パディングを指定                                         */
  white-space : nowrap;                             /* 連続するホワイトスペースを纏める                           */
  line-height : 25px;                               /* 行の高さ指定                                               */
  animation   : scrollAnime 15s linear infinite;    /* スクロール速度                                             */
}
@keyframes scrollAnime{
    0% { transform: translateX(0)}                  /* スクロール範囲始め 0%から                                  */
  100% { transform: translateX(-100%)}              /* スクロール範囲終り 100%まで                                */
}


/* ライン表示 =================================================================================================== */

td.line {
  display         : block;                          /* 表示形式 block                                             */
  height          : 16px;                           /* ラインの高さ                                               */
  width           : 100%;                           /* 横幅指定 tableサイズと同じ                                 */
  background-color: #808080;                        /* ライン色 グレー                                            */
  overflow        : hidden;                         /* オーバーフロー時要素                                       */
}


/* メニューバー設定 ============================================================================================= */

/* メニューバーの装飾 ------------------------------------------------------------------------------------------- */
/* https://allabout.co.jp/gm/gc/23911/6/ */
ul.nav {
  width           : 850px;                          /* メニューバーの横幅指定                                     */
  /* width        : 100%; */                        /* メニューバーの横幅指定                                     */
  display         : flex;                           /* 親要素に指定することで、Flexboxが適用される                */
  flex-direction  : row;                            /* 左から右に横並び（デフォルト値なのでなくても可）           */
  justify-content : center;                         /* メニューバーの中央揃え                                     */
  margin          : auto;                           /* marginを指定すると中央揃えにならないのでautoを指定         */
  /* margin       : 0px; */                         /* メニューバー外側の余白(ゼロ)　中央揃えの場合は指定しない   */
  /* padding      : 0px 0px 0px 0px; */             /* メニューバー内側の余白(右・上・下・左)                     */
  padding         : 0px;                            /* メニューバー内側の余白(全体ゼロ )                          */
  background-color: #e8e8e8;                        /* バーの背景色(ライトグレー色)                               */

}

/* メインメニュー項目の装飾 ------------------------------------------------------------------------------------- */
ul.nav li {
  /* width       : 170px; */                        /* メニュー項目の横幅(170px)                                  */
  width          : 100%;                            /* メニュー項目の横幅(100%)                                   */
  display        : inline-block;                    /* 横並びに配置する                                           */
  list-style-type: none;                            /* リストの先頭記号を消す                                     */
  position       : relative;                        /* サブメニュー表示の基準位置にする                           */
}
ul.nav a {
  /* background-color: #808080; */                  /* メニュー項目の背景色(グレー色 上記で指定の為指定しない)    */
  color           : #000000;                        /* メニュー項目の文字色(黒色)                                 */
  font-size       : 15px;                           /* 文字サイズ                                                 */
  line-height     : 30px;                           /* メニュー項目のリンクの高さ(30px)                           */
  text-align      : center;                         /* メインメニューの文字列の配置(中央寄せ)                     */
  text-decoration : none;                           /* メニュー項目の装飾(下線を消す)                             */
  font-weight     : bold;                           /* 太字にする                                                 */
  display         : block;                          /* 項目内全域をリンク可能(マウス認識範囲)にする               */
}

/* カレント(現在表示)設定 --------------------------------------------------------------------------------------- */
ul.nav li.current a {
  /* background-color: #808080; */                 /* メニュー項目の背景色(グレー色)                              */
}

/* メニュー項目にマウスが載ったときの設定 ----------------------------------------------------------------------- */
ul.nav a:hover {
  background-color: #000000;                        /* 背景色(黒色)                                               */
  color           : #ffffff;                        /* 文字色(白色)                                               */
}

/* サブメニューがある場合に開く処理 ----------------------------------------------------------------------------- */
/* ※サブメニューが1階層しか存在しない場合の記述 */
ul.nav li:hover ul {
  display    : block;                               /* マウスポインタが載っている項目の内部にあるリストを表示する */
}

/* サブメニューの装飾 ------------------------------------------------------------------------------------------- */
ul.nav ul {
  margin    : 0px;                                  /* サブメニュー外側の余白(ゼロ)                               */
  padding   : 0px;                                  /* サブメニュー内側の余白(ゼロ)                               */
  display   : none;                                 /* 標準では非表示にする                                       */
  position  : absolute;                             /* 絶対配置にする                                             */
  background-color: #000000;                        /* 背景色(黒色)                                               */
}

/* サブメニュー項目の装飾 --------------------------------------------------------------------------------------- */
ul.nav ul li {
  width         : 180px;                            /* 1項目の横幅(230px)                                         */
                                                  　/* 数値を小さくすると項目が改行される                         */
  /* width      : 100%; */                          /* 1項目の横幅(100%)                                          */
  /* border-top : 1px solid pink; */       　　     /* 項目上側の枠線(ピンク色で1pxの実線)                        */
}
ul.nav ul li a {
  font-size     : 13px;                             /* 文字サイズ                                                 */
  line-height   : 20px;                             /* サブメニュー1項目の高さ(20px)                              */
  text-align    : left;                             /* 文字列の配置(左寄せ)                                       */
  padding-left  : 5px;                              /* 文字列前方の余白(5px)                                      */
  font-weight   : normal;                           /* 太字にはしない                                             */
  background-color: #000000;                        /* 背景色(黒色)                                               */
  color            : #ffffff;                       /* 文字色(白色)                                               */
}
ul.nav ul li a:hover {
  background-color : #ffffff;                       /* サブメニュー項目にマウスが載ったときの背景色(白色)         */
  color            : #000000;                       /* サブメニュー項目にマウスが載ったときの文字色(黒色)         */
}