body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  overflow: hidden;
}

.contents {
  width: 100vw;
  height: 100vh;
  overflow: scroll; /* スクロールバーを表示 */
}

.contents-inner {
  width: 1920px;
  height: 1080px;
  position: relative;
}

/* 中央の画像をレスポンシブ対応 */
.contents-inner img {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.contents-inner img.logo {
  max-width: 100%;
  z-index: 100;
  top: 50%;
  left: 50%;
}

.btn-img {
  position: absolute;
}
.btn-img img:last-of-type {
  opacity: 0;
  transition: opacity .7s;
}
.btn-img:hover img {
  opacity: 1;
}

.mikaman  {
  width: 210px;
  top: 74%;
  left: 54%;
}

.mikaman img {
  max-width: 210px;
}

.jyuusanmairi {
  width: 196px;
  top: 62%;
  left: 38%;
}

.jyuusanmairi img {
  max-width: 196px;
}

.hagimonaka {
  width: 178px;
  top: 50%;
  left: 62%;
}

.hagimonaka img {
  max-width: 178px;
}

.ootehashi {
  width: 224px;
  top: 38%;
  left: 76%;
}

.ootehashi img {
  max-width: 224px;
}

.oodengaku {
  width: 178px;
  top: 20%;
  left: 60%;
}

.oodengaku img {
  max-width: 178px;
}

.koodengaku {
  width: 178px;
  top: 24%;
  left: 36%;
}

.koodengaku img {
  max-width: 178px;
}

.umekouen {
  width: 216px;
  top: 44%;
  left: 26%;
}
.umekouen img {
  max-width: 216px;
}

/* main-menu */
ul.main-menu {
	& li {
		writing-mode: vertical-rl;
		text-align: center;
		text-decoration: none;
		list-style-type: none;
		margin-top: 0;
		position: absolute;
		z-index: 100;
		transform: translate(-50%, -50%);

		/* CSS Nesting */
		 & a {
			width: 6rem;
			height: 6rem;
			color: #fff;
			text-decoration: none;
			border-radius: 50%;
			background-color: #C79696;
			padding: 0.75rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		 & a:hover	{
			background-color: rgba(199,150,150,0.75);
		}
	}

	& li.li-news {
		top: 12%;
		left: 44%;
	}
	& li.li-menu {
		top: 64%;
		left: 70%;
	}
	& li.li-buy {
		top: 62%;
		left: 28%;
	}
	& li.li-direct {
		top: 40%;
		left: 42%;
	}
	& li.li-others {
		display: none;
	}
	& li.li-net {
		top: 20%;
		left: 24%;
	}
	& li.li-rakuten {
		top: 82%;
		left: 38%;
	}
	& li.li-contact {
		top: 16%;
		left: 74%;
	}
	& li.li-hitachi {
		right: 14%;
		bottom: 10%;
	}
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .contents-inner {
		transform: scale(0.8);
  }

  .contents-inner img {
    max-width: 100%;
  }
}