/* 全体構成 */
#wrapper {
  position: relative;
  max-width: 2000px;
  min-width: 1200px;
  height: 100%;
  margin: 0 auto;}
.inner {
  position: relative;
  height: 100%;
  margin: 0 auto;}
.pcn {
  display: none;}
.spn {
  display: inline-block;}

@media (max-width: 767px) {
#wrapper {
  max-width: 640px;
  min-width: 640px;}
.inner {
  width: 100%;}
.pcn {
  display: inline-block;}
.spn {
  display: none;}
}

/* ヘッダー構成 */
#header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 2%;
  z-index: 99;}
#header img {
  width: 100px;}
@media (max-width: 767px) {
#header {
  padding: 6%;}
#header img {
  width: 120px;}
}

/* ナビゲーション構成 */
#nav {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
  width: 200px;
  padding-right: 2%;
  z-index: 100;}
#nav li + li {
  margin-top: 15%;}
#nav li a {
  pointer-events: none;
  font-family: nobel, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #fff;
  letter-spacing: .2em;}
#nav small {
  position: absolute;
  bottom: 2%;
  right: 15%;
  font-family: nobel, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #fff;
  letter-spacing: .3em;
  z-index: -1;}
@media (max-width: 767px) {
#nav {
  justify-content: space-between;
  padding: 10% 5% 5%;
  text-align: right;
  width: auto;
  z-index: 100;}
#nav li + li {
  margin-top: 30%;}
#nav li a {
  font-size: 20px;}
#nav small {
  position: static;
  font-family: nobel;
  font-size: 15px;
  color: #fff;
  letter-spacing: .3em;
  z-index: -1;}
}

/* コンテナ構成 */
#container {
  display: none;
  height: 100%;
  position: relative;
  padding: 2% 200px 2% 200px;}
@media (max-width: 767px) {
#container {
  padding: 80% 0 12% 12%;}
}

/* フッター構成 */
#footer {
  padding: 0 200px 0 2%;
  position: relative;}
#footer .fbox {
  padding: 2% 0;
  border-top: 1px solid rgba(255,255,255,1);}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #262626 50%, #111 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;}
.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;}
.bg3 {
  animation-duration:5s;}
@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

h2 {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
  font-size: 16px;
  color: #fff;
}
h2 i {
  order: 2;
  margin-bottom: 20px;
  letter-spacing: .4em;
}
h2 span {
  font-family: nobel, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
  order: 2;
  letter-spacing: .2em;
}