* {
   box-sizing: border-box;
}

@font-face {
	font-family: "tnr";
	src: url('../fonts/tnr.woff2') format('woff2'),
	url('../fonts/tnr.woff') format('woff'),
	url('../fonts/tnr.ttf') format('truetype');
}

body {
   margin: 0;
   padding: 0;
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   display: flex;
   flex-flow: column;
   min-height: 100vh;
   min-width: 600px;
}

content {
    position: relative;
    flex: 1;
}

header {
    width: 100%;
    padding: 6px 4% 0px;
    background-color: #000;
    top: 0;
    display: flex;
    align-items: center;
}

ul {
   list-style: none;
   margin: 0;
   display: flex;
}

li {
   margin: 0 0 0 30px;
   font-size: 20px;
}

nav {
   margin: 0 0 0 auto;
}

.outline {
  color          : #cb7828;            /* 文字の色 */
  font-size      : 20pt;                /*文字のサイズ */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       1px  1px 1px #FFFFFF,
      -1px  1px 1px #FFFFFF,
       1px -1px 1px #FFFFFF,
      -1px -1px 1px #FFFFFF,
       1px  0px 1px #FFFFFF,
       0px  1px 1px #FFFFFF,
      -1px  0px 1px #FFFFFF,
       0px -1px 1px #FFFFFF;        /* 文字の影 */
}

.bve a {
    width: 140px;
    height: 70px;
    background: url("../image/bve.png") no-repeat;
    display: block;
    text-indent: -9999px;
}
 
.bve a:hover {
    background-position: 0 -70px;
}

.link a {
    width: 140px;
    height: 70px;
    background: url("../image/link.png") no-repeat;
    display: block;
    text-indent: -9999px;
}
 
.link a:hover {
    background-position: 0 -70px;
}

.contact a {
    width: 140px;
    height: 70px;
    background: url("../image/contact.png") no-repeat;
    display: block;
    text-indent: -9999px;
}
 
.contact a:hover {
    background-position: 0 -70px;
}

.tnr{
    font-family:tnr;
    color:#FFF;
}

footer {
    width: 100%;
    padding: 6px 4% 0px;
    background-color: #000;
    display: flex;
    margin: 0 auto;
}