nav {
  display: flex;
  width: 100%;
  height: var(--base-head);
  align-items: center;
  font-size: var(--base-font);
  background-color: var(--base-color);
  box-sizing: border-box;
}
nav .left-menu {
  position:absolute;
  left: 5px;
}
nav .center-menu {
  position: absolute;
  flex: 1;  
  left: 50%;
  transform: translateX(-50%);
  color: white;
}
nav .right-menu {
  position: absolute;
  right: 10px;
  font-size: var(--base-icon);
  height: var(--base-icon);
  line-height: var(--base-icon);
  border: 1px solid #090a3d;
  border-radius: 10px;
  text-align: center;
  padding: 0 7px;
  color: white;
  cursor: pointer;
}
nav .right-menu:hover {
  color: #999;
  font-weight: bold;
}

iframe {
  display: flex;
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  border: none;
  box-sizing: border-box;
}
.site-img {
  display: block;
  height: var(--base-head);
  width: auto;
  padding:5px;
  box-sizing: border-box;
}
/* */
.m3-font {
  font-size: var(--base-font);
}
.m3-title {
  display:flex;
  width: 100%;
  padding:20px;
  font-size: var(--menu-font);
  box-sizing: border-box; 
}
/*  */
/* オーバーレイ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* 表示状態 */
/* overlay */
#overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#overlay.open {
  display: block;
  opacity: 1;
}
/* side menu */
body {
  -webkit-user-select: none; /* iOS Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
  user-select: none;         /* 標準 */
}
.side-menu {
  position: fixed;
  top: var(--base-head);
  right: calc(-1 * var(--menu-width));
  width: var(--menu-width);
  height: 100%;
  background: #333;
  color: #fff;
  transition: right 0.3s ease;
  z-index: 999;
}
.side-menu.open {
  right: 0;
}
.side-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-menu li {
  border-bottom: 1px solid #555;
}
.side-menu a {
  display: block;
  padding: var(--menu-padding);
  color: #fff;
  background: #333;
  text-decoration: none;
  font-size: var(--menu-font);
}
.side-menu a:hover {
  background: #444;
}

/* sub-menu */
.has-sub > .sub-menu {
  display: none;
  /*background: #444;*/
}
.has-sub.open > .sub-menu {
  display: block;
}

.sub-menu a {
  background: #555;
}