@charset "utf-8";

/*----- header -----*/
header .box > .btn_box {
  margin: 0 0 0 auto;
}
nav {
  visibility: hidden;
  text-align: center;
  padding: 60px 3% 30px 3%;
  width: 40%;
  background: #eaf6ff;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  box-shadow: -1px 0 9px #0000004d;
  transform: translateX(40%);
  transition: transform 0.3s;
}
#h_nav {
  padding: 30px 3%;
  border-radius: 9px;
  background: #fff;
}
nav > a img {
  width: 75%;
}
.open nav {
  visibility: visible;
  transform: translateX(0);
}
nav li a {
  color:#005a96;
  text-decoration: none;
  margin-bottom: 18px;
  position: relative;
  display: block;
}
nav li.btn_box a {
  margin-bottom: 0;
}

/* nav */
#nav-toggle {
  margin-left: 3rem;
  width: 3rem;
  height: 2.3rem;
  position: relative;
  cursor: pointer;
  z-index: 1001;
}
#nav-toggle p {
  width: 100%;
  height: 0.3rem;
  background: #005a97;
  transition: all .4s;
  background: #005a96;
}
#nav-toggle p:nth-of-type(1) , #nav-toggle p:nth-of-type(2) {margin-bottom: 0.7rem;}
/* オープン時 */
#nav-toggle.active p:nth-of-type(1) {transform: translateY(1rem) rotate(-45deg);}
#nav-toggle.active p:nth-of-type(2) {opacity: 0;}
#nav-toggle.active p:nth-of-type(3) {transform: translateY(-1rem) rotate(45deg);}

/*----- mi -----*/
#mi .box {
  height: 56.4rem;
  padding-top: 22.5rem;
}

/*----- conversion -----*/
#conversion {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  padding: 1.5rem 0;
  background: #ffffffb3;
}
.btn_box {
  width: fit-content;
  height: fit-content;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15rem;
  position: relative;
  z-index: 10;
  transition: .2s;
}
.btn_box .btn {
  transition: 0.3s;
}
.btn_box .btn:hover {
  opacity: 0.8;
}

@media screen and (min-width: 481px) {
  /*----- mi -----*/
  #mi {
    background: url(../img/mi/bg_pc.webp) no-repeat center top;
  }
}

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

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

@media screen and (max-width:480px) {
  /*----- mi -----*/
  #mi {
    background: url(../img/mi/bg_sp.webp) no-repeat center top;
    background-size: cover;
  }
  #floating {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 101;
    background: #ffffffd9;
  }
  #floating .box {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  nav {
    transform: translateX(100%);
    width: 100%;
  }
}