@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: 6;
}

#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 0px 20px 3px rgb(255 255 255 / 50%);
  padding-bottom: 5%;
}


#section1 a img {
  width: calc(100% - 16.666666666%);
  margin: 2.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 a {
  display: block;
  margin: 35px auto;
}


/*-------------------------
	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% {
    transform: scale(0.5, 0.5);
    opacity: 0;

  }

  50% {
    transform: scale(1.2, 1.2);

  }

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

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

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

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

#logo {
  -webkit-animation: mainvisua1-2 1.5s alternate ease;
  animation: mainvisua1-2 1.5s alternate ease;
}

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

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

}

#machine {
  -webkit-animation: mainvisua1-3 1.5s alternate ease;
  animation: mainvisua1-3 1.5s alternate ease;
}

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

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

#menubtngroup {
  animation-name: menubtn;
  animation-duration: 0.7s;
  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);
  }
}

.src_circle {
  top: 0%;
  position: absolute;
  animation: rotation1 10s linear infinite;
}

@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 img {
    width: calc(100vw / 2.7);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /*-------------------------
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 / 2.2);
  }

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

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

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

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

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

  /*-------------------------
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 img {
    width: calc(100vw / 1.8);
  }

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

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

  #logo {
    top: 40%;
  }

  #machine {
    right: 3%;
  }

  #copyright img {
    margin-top: 2.5%;
    margin-left: auto;
    width: calc(100vw / 2.6);
  }

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

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

  /*-------------------------
	footer
--------------------------*/

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


  .copyright {
    font-size: 8px;
  }

  .sp{
    display: block;
  }

}