@charset "UTF-8";

/*-------------------------
	basic elements
--------------------------*/
html {
  font-family: "メイリオ", Meiryo, Verdana, sans-serif;
  scroll-behavior: smooth;
}

#header {
  width: 100%;
  background-color: #000000;
}

h1 {
  padding: 1%;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 1px 1px 1px #ffffff, 0 0 rgb(0, 0, 0);
}

body::before {
  background: url("../images/mv_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

#page,
#header div {
  width: 1000px;
  margin: auto;
}

/*-------------------------
	mainvisual
--------------------------*/
#mainvisual {
  position: relative;
  margin-bottom: 5%;
}

#logo,
#machine {
  position: absolute;
}

#logo {
  z-index: 7;
}

#machine {
  z-index: 6;
}

#copyright img {
  margin-top: 2.5%;
  margin-left: auto;
}

/*-------------------------
  menubtngroup
--------------------------*/
#menubtngroup {
  margin-bottom: 5%;
  display: flex;
  flex-wrap: wrap;
}

#menubtngroup a {
  width: calc(100%/3);
}

#menubtngroup figure {
  position: relative;
}

.src_active {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.src_active:hover {
  opacity: 1;
}

/*-------------------------
	machinedetail
--------------------------*/
#machinedetail {
  width: 75%;
  margin: auto;
  background-color: #2E2E2E;
  box-shadow: 0px -2px 10px 0.5px rgb(255 255 255 / 50%);
  padding-bottom: 5%;
  position: relative;
}

#section1 a img {
  width: calc(100% - 16.666666666%);
  margin: 5% 8.333333333% 0% 8.333333333%;
}

.lity-wrap {
  background-color: rgba(118, 118, 118, 0.5);
}

#section2 img,
#section3 img,
#section4 img,
#section5 img {
  width: 100%;
}

section {
  margin-bottom: 12.5%;
}

#section1 {
  padding: 3.5% 0%;
}

.caption {
  margin: 2.5% 8.333333333%;
}

#section1 img:nth-child(1) {
  margin-bottom: 2.5%;
}

.othermachines {
  margin: 5% 8.333333333%;
}

.othermachines figure {
  display: flex;
  align-items: center;
  padding: 2.5% 0%;
  margin: 5% 0%;
  border: 2.5px solid;
  border-color: #59FFFD;
}

.othermachines figure>img {
  width: 38%;
}

.othermachines div {
  flex-direction: column;
  width: 62%;
}

.othermachines figure div div {
  position: relative;
}

.othermachines figure a,
.othermachines figure div div {
  width: 100%;
}

.src_active2 {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: 0.7s;
}

.src_active2:hover {
  opacity: 1;
}

.othermachines>figure:nth-child(1) {
  background: url("../images/beast_background.svg") no-repeat;
  background-size: cover;
}

.othermachines>figure:nth-child(2) {
  background: url("../images/nights_background.svg") no-repeat;
  background-size: cover;
}

.othermachines>figure:nth-child(3) {
  background: url("../images/oceanj_background.svg") no-repeat;
  background-size: cover;
}

.othermachines>figure:nth-child(4) {
  background: url("../images/oceanu_background.svg") no-repeat;
  background-size: cover;
}



/*-------------------------
	hoverbtn
--------------------------*/
.hoverbtn {
  position: fixed;
  bottom: 1%;
  right: 1%;
  z-index: 10;
  display: none;
}

.hoverbtn figure {
  position: relative;
}

/*-------------------------
	footer
--------------------------*/
footer {
  background-color: black;
  z-index: 99;
  position: relative;
}

.footer-logo {
  display: flex;
  width: 1000px;
  margin: auto;
}

.footer-logo a {
  width: calc(100%/3);
  padding: 5%;
}

.copyright {
  font-family: Arial, Helvetica, sans-serif;
  margin: auto;
  width: 95%;
  font-size: 10px;
  line-height: 1.8;
  padding-bottom: 1.5%;
  letter-spacing: 0;
  color: #fff;
  text-align: center;
}

.sp {
  display: none;
}



/*-------------------------
	animation
--------------------------*/
@keyframes mainvisua1-1 {
  0% {
    opacity: 0;
    transform: translateX(70%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

#chara {
  -webkit-animation: mainvisua1-1 0.4s alternate ease-in-out;
  animation: mainvisua1-1 0.4s alternate ease-in-out;
}

@keyframes mainvisua1-2 {
  0% {
    transform: scale(0, 0);
    opacity: 0;

  }

  70% {
    transform: scale(1.2, 1.2);
    opacity: 0;

  }

  100% {
    transform: rotate(0) scale(1, 1);
  }
}

#logo,
#machine {
  -webkit-animation: mainvisua1-2 0.65s alternate ease-out;
  animation: mainvisua1-2 0.65s alternate ease-out;
}

#machine {
  -webkit-animation: mainvisua1-2 0.85s alternate ease-out;
  animation: mainvisua1-2 0.85s alternate ease-out;
}



@keyframes mainvisua1-3 {
  from {
    opacity: 0;
    transform: translateX(50%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes menubtn {
  from {
    opacity: 0;
    transform: translateY(70%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#menubtngroup {
  animation-name: menubtn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.deray-1 {
  opacity: 0;
  animation: menubtn 0.7s linear 0.16s 1 normal forwards;
}

.deray-2 {
  opacity: 0;
  animation: menubtn 0.7s linear 0.32s 1 normal forwards;
}

.deray-3 {
  opacity: 0;
  animation: menubtn 0.7s linear 0.48s 1 normal forwards;
}

.deray-4 {
  opacity: 0;
  animation: menubtn 0.7s linear 0.64s 1 normal forwards;
}

.deray-5 {
  opacity: 0;
  animation: menubtn 0.7s linear 0.8s 1 normal forwards;
}

@keyframes rotation1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes detail {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#machinedetail {
  animation: detail 2.7s ease;
}

/*--------------------------------------------------------------------------
	1600px~
---------------------------------------------------------------------------*/
@media screen and (min-width:1580px) {

  /*-------------------------
	header
--------------------------*/
  h1 {
    font-size: 44px;
  }

  /*-------------------------
	mainvisual
--------------------------*/

  #chara {
    margin-left: -35%;
  }

  #logo {
    top: 45%;
    left: 15%;
  }

  #machine {
    top: -4%;
    right: -2%;
  }

  #copyright img {
    margin-top: -28.5%;
  }

  /*-------------------------
	 #menubtngroup
--------------------------*/


  /*-------------------------
	hoverbtn
--------------------------*/
  .hoverbtn figure {
    width: calc(100vw / 8.5);
  }
}

/*--------------------------------------------------------------------------
	~1599px
---------------------------------------------------------------------------*/
@media screen and (max-width:1599px) {

  /*-------------------------
	header
--------------------------*/
  h1 {
    font-size: 36px;
  }

  /*-------------------------
	mainvisual
--------------------------*/

  #chara {
    margin-left: -35%;
  }

  #logo {
    top: 45%;
    left: 15%;
  }

  #machine {
    top: -4%;
    right: -2%;
  }

  #copyright img {
    margin-top: -28.5%;
  }

  /*-------------------------
hoverbtn
--------------------------*/
  .hoverbtn figure {
    width: calc(100vw / 7);
  }
}

/*--------------------------------------------------------------------------
	~1249px
---------------------------------------------------------------------------*/
@media screen and (max-width:1249px) {

  /*-------------------------
	header
--------------------------*/
  h1 {
    font-size: 32px;
  }

  /*-------------------------
	basic elements
--------------------------*/
  #page,
  #header div {
    width: 75%;
  }

  /*-------------------------
	mainvisual
--------------------------*/
  #chara img {
    width: calc(100vw/1.2);
  }

  #logo {
    top: 45%;
    left: 15%;
  }

  #logo img {
    width: calc(100vw/2.4);
  }

  #machine {
    top: -4%;
    right: -5%;
  }

  #machine img {
    width: calc(100vw/3.6);
  }

  #copyright img {
    margin-top: -28.5%;
    width: calc(100vw/2);

  }

  /*-------------------------
hoverbtn
--------------------------*/
  .hoverbtn figure {
    width: calc(100vw / 7.2);
  }

  /*-------------------------
footer
--------------------------*/
  .footer-logo {
    width: 75%;
    margin: auto;
  }
}


/*--------------------------------------------------------------------------
	~800px
---------------------------------------------------------------------------*/

@media screen and (max-width:800px) {

  /*-------------------------
	basic elements
--------------------------*/

  body::before {
    background: url("../images/mv_bg_sp.jpg") no-repeat;
    background-size: cover;
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100%;
  }

  #page,
  #header div {
    width: 90%;
  }

  /*-------------------------
	header
--------------------------*/
  h1 {
    font-size: 18px;
    text-shadow: 0.5px 0.5px 0.5px #ffffff, 0 0 rgb(0, 0, 0);
  }

  /*-------------------------
	mainvisual
--------------------------*/
  #chara {
    margin-left: -72%;
  }

  #chara img {
    width: calc(100vw/0.2);
  }

  #logo {
    top: 45%;
    left: -2%;
  }

  #logo img {
    width: calc(100vw/1.7);
  }

  #machine {
    top: -3%;
    left: 65%;
  }

  #machine img {
    width: calc(100vw/2.9);
  }

  #copyright img {
    margin-top: -91.5%;
    width: calc(100vw/1.5);
  }

  /*-------------------------
  menubtngroup
--------------------------*/
  #menubtngroup a {
    width: calc(100%/2);
  }

  /*-------------------------
	machinedetail
--------------------------*/
  #machinedetail {
    width: 85%;
    margin: auto;
  }

  .othermachines figure {
    border: 1.25px solid;
    border-color: #59FFFD;
  }

  /*-------------------------
	footer
--------------------------*/
  .footer-logo a {
    padding: 3.5%;
  }

  .copyright {
    font-size: 8px;
  }

  .sp {
    display: block;
  }

}