@charset "UTF-8";

a:hover img {
  filter: alpha(opacity=70);
  opacity: 0.7;
}

.noMouseHover a:hover img, /* クラス単位でopacityを戻す */
a:hover img.noMouseHover   /* 画像単位でopacityを戻す */
{
  filter: alpha(opacity=100);
  opacity: 1;
}

body {
  width: 750px;
  color: white;
}

body::before {
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  background: black url('../image/index/back_sp.jpg') no-repeat center top;
  background-size: 100% auto;
  top: 0;
  left: 0;
  z-index: -1;
}

img.logo {
  width: 33%;
  margin: 109px 0 0 8%;
}

nav {
  margin-top: 475px;
}

nav ul {
  width: 67%;
  display: table;
  table-layout: fixed;
  text-align: center;
  margin-left: 15%;
  padding: 0;
}

nav ul li {
  display: table-cell;
  vertical-align: middle;
}

nav ul li a {
  display: block;
}

.copyright {
  width: 50%;
  text-align: center;
  margin: 270px auto 0;
}

.copyright img:first-child {
  width: 63%;
}

.copyright img:last-child {
  width: 100%;
  margin-top: 10px;
}

@media screen and (min-width: 920px), screen and (orientation: landscape) {
  body {
    width: auto;
    min-width: 1200px;
    background: url('../image/index/back.jpg') center top / cover no-repeat fixed;
  }

  body::before {
    display: none;
  }

  img.logo {
    width: 227px;
    margin: 37px 0 0 52px;
  }

  nav {
    width: 98px;
    margin: 54px 0 0 109px;
  }

  nav ul {
    width: 98px;
    display: block;
    margin: 0;
  }

  nav ul li {
    display: list-item;
    height: 82px;
    position: relative;
  }

  nav ul li a {
    width: 100%;
    height: 100%;
  }

  nav ul li img {
    height: auto;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .copyright {
    width: 291px;
    margin: 30px 0 0 80px;
    text-align: left;
    position: relative;
  }

  .copyright img {
    margin-top: 13px;
  }

  .copyright img:first-child {
    width: auto;
  }

  .copyright img:last-child {
    width: auto;
  }
}

@media screen and (min-width: 920px) and (min-height: 600px) {
  .copyright {
    margin: 0;
    position: absolute;
    bottom: 40px;
    left: 80px;
  }
}

@media screen and (max-width: 919px) and (orientation: landscape) {
  nav {
    margin-top: 20px;
  }

  .copyright {
    margin-top: 0;
  }
}