@charset "UTF-8";
* {
  margin: 0; }

ul {
  list-style-type: none; }

a {
  text-decoration: none;
  color: #666; }

body {
  width: 100vw;
  height: 100vh;
  font-family: "游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,sans-serif;
  color: #aaa;
  font-weight: 100; }

.bold {
  font-weight: 900;
  color: #000; }

#panel {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr; }

#logo {
  width: 100%;
  grid-row: 1 / -1;
  grid-column: 1 / -1; }

header {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  z-index: 2000; }

.slide {
  display: grid;
  grid-row: 1 / -1;
  grid-column: 1 / -1; }

.slide img {
  width: 100vw;
  height: 100vh;
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  object-fit: cover;
  opacity: 0;
  animation: slideAnime 50s ease infinite; }

.slide img:nth-of-type(1) {
  animation-delay: 0s;
  object-position: 20% 100%; }

.slide img:nth-of-type(2) {
  animation-delay: 10s;
  object-position: 25% 50%; }

.slide img:nth-of-type(3) {
  animation-delay: 20s;
  object-position: 40% 50%; }

.slide img:nth-of-type(4) {
  animation-delay: 30s;
  object-position: 51% 50%; }

.slide img:nth-of-type(5) {
  animation-delay: 40s;
  object-position: 20% 50%; }

.slide2 {
  display: grid;
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  z-index: 1000; }

.slide2 img {
  width: auto;
  height: 66vh;
  position: absolute;
  right: 8vh;
  bottom: 8vh;
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  opacity: 0;
  animation: slideAnime 50s ease infinite; }

@media (max-width: 800px) {
  .slide2 img {
    height: 35vh;
    right: 4vh;
    bottom: auto;
    top: 4vh; } }
.slide2 img:nth-of-type(1) {
  animation-delay: 0s; }

.slide2 img:nth-of-type(2) {
  animation-delay: 10s; }

.slide2 img:nth-of-type(3) {
  animation-delay: 20s; }

.slide2 img:nth-of-type(4) {
  animation-delay: 30s; }

.slide2 img:nth-of-type(5) {
  animation-delay: 40s; }

@keyframes slideAnime {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  20% {
    opacity: 1; }
  30% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@media (max-width: 800px) {
  .menuWrapper {
    position: relative;
    z-index: 0;
    border: 0;
    width: 50px;
    height: 50px; }

  #menuButton {
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin: 3vh 15px; }

  #menuButton span,
  #menuButton::before,
  #menuButton::after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 36px;
    height: 6px;
    margin: auto;
    border-radius: 5px;
    animation: menuAnime 50s ease infinite; }

  #menuButton span {
    overflow: hidden;
    z-index: 1;
    color: #000; }

  @keyframes menuAnime {
    0% {
      background: #fff; }
    10% {
      background: #000; }
    20% {
      background: #000; }
    30% {
      background: #fff; }
    40% {
      background: #fff; }
    50% {
      background: #000; }
    60% {
      background: #000; }
    70% {
      background: #fff; }
    80% {
      background: #fff; }
    90% {
      background: #fff; }
    100% {
      background: #fff; } }
  #menuButton::before {
    z-index: 2;
    transform: translate(0, -12px);
    content: ""; }

  #menuButton::after {
    z-index: 2;
    transform: translate(0, 12px);
    content: ""; }

  /*アニメーション*/
  .hide {
    display: none; }

  #menu {
    overflow: hidden;
    background: url("../img/log_bl.png") 10px 4vh/auto 25vh no-repeat; }

  #menu ul {
    height: 100vh;
    display: grid;
    grid-template-rows: 40vh 8vh 8vh 8vh 8vh 8vh 8vh;
    padding: 0; }

  #menu li {
    display: block;
    font-weight: 900;
    font-size: 2.3vh;
    border-top: 1px dotted #000;
    vertical-align: middle; }

  #menu li:first-child {
    border: none; }

  #menu li:last-child {
    border-bottom: 1px dotted #000; }

  #menu a {
    padding-left: 10px;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; }

  #menu a:hover {
    background: #eee; } }
@media (min-width: 801px) {
  #menu {
    z-index: 5000;
    display: block;
    background: #fff;
    width: 100vh;
    height: 25px;
    transform: rotate(90deg);
    transform-origin: left top;
    position: absolute;
    top: 0;
    left: 25px; }

  #menu ul {
    margin-left: 8px;
    padding: 2px 0;
    font-size: 12px; }

  #menu li {
    float: left; }

  #menu a {
    padding: 0 4px; }

  a:hover {
    color: #ff6c00; } }

/*# sourceMappingURL=main.css.map */