* {
  margin: 0;
  padding: 0;
}

/* body {
  font-family: 'Arial', 'Helvetica', 'メイリオ', Meiryo, 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
} */

.zstacks {
  margin: 30px 50px;
  font-size: 24px
}

p.thumbnails {
  margin: 20px 50px;
}

img.thumbnail {
  display: inline-block;
  margin: 2px;
  padding: 5px;
  border-width: 0;
  border-color: #4444cc;
  border-style: solid;
  border-width: 2px;
}

hr {
  border-color: #8888bb;
  border-style: solid;
  height: 0px;
}

p.download {
  margin: 15px;
}

p.photo {
  text-align: center;
}

a.navi {
  border-style: solid;
  border-width: 1px 2px 2px 1px;
  padding: 1px 4px 1px 4px;
  border-color: #6666ff;
  color: #0000ff;
  font-weight: bold;
  text-decoration: none;
}

a.navi:hover {
  background-color: #ddddff;
}

a.navi:visited {
  color: #aa55cc;
}

img.photo {
  margin: 4px;
  padding: 6px;
  border-width: 0;
  border-color: #8888ff;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
}

/*header {
    padding: 20px;
    background-color: #D0ABFF;
}*/

/*header .logo-area {
    font-size: 2em;
    font-weight: bold;
    color: #000000;
}*/

#nav-drawer {
  position: relative;
}

.nav-unshown {
  display: none;
}

/*チェックボックス等は非表示に*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*サイトアイコンのスペース*/
#nav-open span {
  color: #FF8585;
  display: block;
  position: fixed;
  top: 15px;
  right: 15px;
  cursor: pointer;
}

/*ハンバーガーの形をCSSで表現（アイコンで代用）*/
#nav-open span:before {
  bottom: -8px;
}

#nav-open span:after {
  bottom: -16px;
}

#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*閉じる用の薄黒箇所*/
#nav-content {
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 90%;
  max-width: 330px;
  /*最大幅（お好みで調整を）*/
  height: 100%;
  background: #3C5172;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

/*unchecked時の位置*/
/*メニューの中身*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
}

/*checked時の位置*/
.header-logo-menu {
  display: flex;
  display: -moz-flex;
  display: -o-flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-direction: row;
  -moz-flex-direction: row;
  -o-flex-direction: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
}

header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

header li {
  display: block;
  margin: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

header li:hover {
  background-color: #87B5FF;
}

header a {
  display: inline-block;
  width: 100%;
  padding: 0.35em 0 0.35em 20px;
  text-decoration: none;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

.logo-area {
  text-align: center;
  margin: auto;
}

/*ロゴやサイトタイトルをセンタリング*/