@charset "utf-8";
/*===============================================
画面の横幅が769px以上（パソコン用）
===============================================*/
@media screen and (min-width:769px){
div#wrap{
  width : 400px;   
  margin: 0 auto;   
  text-align:left;   
}
/* ヘッダーの固定 */
div#header-fixed{
    position: fixed;            /* ヘッダーの固定 */
    width: 400px;                /* 横幅100%　*/
    height: 110px;              /* 縦幅140px */
    background-color:green;     /* 背景色(黒) */

}
.site-footer{
	width:400px;
	display:flex;
	position:fixed;
	bottom:0px;
	justify-content:space-between;
	z-index:110;
	margin-bottom:-14px;
	margin-right:auto;
	margin-left:auto;
	background-color:green;
}
}
/*===============================================
画面の横幅が768pxまで（タブレット用）
===============================================*/
@media screen and (max-width:769px){
div#wrap{
  width : 400px;   
  margin: 0 auto;   
  text-align:left;   
}
/* ヘッダーの固定 */
div#header-fixed{
    position: fixed;            /* ヘッダーの固定 */
    width: 400px;                /* 横幅100%　*/
    height: 110px;              /* 縦幅140px */
    background-color:green;     /* 背景色(黒) */

}
.site-footer{
	width:400px;
	display:flex;
	position:fixed;
	bottom:0px;
	justify-content:space-between;
	z-index:110;
	margin-bottom:-14px;
	margin-right:auto;
	margin-left:auto;
	background-color:green;
}
}
/*===============================================
画面の横幅が640pxまで（スマホ用）
===============================================*/
@media screen and (max-width:640px){
div#wrap{
  width : 100%;   
  margin: 0 auto;   
  text-align:left;   
}
/* ヘッダーの固定 */
div#header-fixed{
    position: fixed;            /* ヘッダーの固定 */
    top: 0px;                   /* 位置(上0px) */
    left: 0px;                  /* 位置(右0px) */
    width: 100%;                /* 横幅100%　*/
    height: 110px;              /* 縦幅140px */
    background-color:green;     /* 背景色(黒) */

}


.site-footer{
	width:100%;
	display:flex;
	position:fixed;
	bottom:0px;
	justify-content:space-between;
	z-index:110;
	margin-bottom:-14px;
	margin-right:auto;
	margin-left:auto;
	background-color:green;
}
}

body{
	font-family:'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';font-size:14px;color:gray;text-align:left;
}
/* html,bodyタグの設定 */
html, body{
    margin: 0;         /* 余白の削除 */
    padding: 0;        /* 余白の削除 */
    width:100%;
    height:100%;
}


/* ボディの定義 */
div#body-bk{
	padding:100px 0 0 5px;
}/* 上下に100pxを余白を取る */
div#body{
	width:100%;margin:auto;
}
h1{
	color:white;margin:5px;
}

#subtitle{
	font-size:12px;
}

h2{
	color:white;font-size:14px;margin:0 0 0 10px;
}
#copyright{
	margin-top:10px;text-align:center;color:red;padding-bottom:50px;
}

.navi-footer ul{
	display:table;table-layout:fixed;width:100%;padding:0px;margin-top:0px;
}
.navi-footer li{
	display:table-cell;text-align:center;padding-top:5px;padding-bottom:5px;
}
.navi-footer li:first-child{
	border-top-left-radius:5px;border-bottom-left-radius:5px;
}
.navi-footer li:last-child{
	border-top-right-radius:5px;border-bottom-right-radius:5px;
}
.navi-footer li:not(:last-child){
	border-right:1px solid white;
}
.navi-footer li a{
	display:block;text-decoration:none;color:white;
}
.here{
	background-color:green!important;
}