.main-visual {
  position: relative;
  top: 60px;
}

.pc-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 55%;
}

.bgbox{
  display: none;
}

.sp-visual{
  padding: 15px;
}

.intro-top{
  width: 86%;
  margin: 7em auto 4em;
  letter-spacing: .06em;
}

.intro-img{
  width: 80%;
  margin: 0 auto 3em;
}

.p-eng{
  padding-bottom: 1em;
}

.p-jap{
  padding-top: 0.5em;
}

.intro-top .p-jap br{
  display: none;
}

.about-left, .plan-left, .plan-right{
  width: 85%;
  margin: 3em auto;
}

.about-right{
  display: none;
}

.mid-contents{
  width: 85%;
  margin: 2em auto 3em;
}

.plan-left p span{
  display: block;
  padding-top: 0.5em;
}

.top-galle{
  display: none;
}

.sp-top-galle {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  margin: 3em 0 1em 2em;
}

.sp-box {
  display: inline-block;
  width: 235px;
  margin-right: 13px;
}

#galle .btn{
  width: 85%;
  margin: 3em auto 4em;
}

.sp-contact-img{
  width: 85%;
  margin: 3em auto;
}

.contact-left{
  width: 85%;
  margin: 0 auto 3em;
}

.contact-left dl{
  margin: 2em 0;
}

.contact-left dt{
  font-size: 1.7rem;
  margin-bottom: 1em;
}

.contact-left dt span{
  display: block;
  margin-top: -5px;
  font-size: 1.3rem;
}

.contact-left .btn li{
  font-size: 1.5rem;
}

.contact-right{
  display: none;
}

@media (min-width: 834px) {

  .main-visual {
    top: 0;
  }
  
  .pc-logo {
    width: 25%;
  }

  /*firefoxもいける背景画像スライド*/
  .bgbox {
    display: block;
    width: 100%;
    height: 100vh;
    border-bottom: 1px solid;
  }

  .bgbox .bgImg {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.01;
    animation: 15s ease 0s infinite normal none running bgAnime;
  }

  .bgbox .src1 {
    background-image: url(../img/top02.jpg);
    animation-delay: 0s;
  }

  .bgbox .src2 {
    background-image: url(../img/top01-1.jpg);
    animation-delay: 5s;
  }

  .bgbox .src3 {
    background-image: url(../img/top03.jpg);
    animation-delay: 10s;
  }

  @keyframes bgAnime {
    0% {
      opacity: 0.01;
    }

    16% {
      opacity: 1;
    }

    33% {
      opacity: 1;
    }

    49% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  .fade-in {
    animation: topfade backwards 2.3s ease 1 0.3s;
  }

  @keyframes topfade {
    0% {
      opacity: 0.01;
    }

    100% {
      opacity: 1;
    }
  }

  .fade-logo {
    animation: fade-logo backwards 1.5s ease 1 1.3s;
  }

  @keyframes fade-logo {
    0% {
      opacity: 0.01;
    }

    100% {
      opacity: 1;
    }
  }

  .sp-visual{
    display: none;
  }

  .intro-top {
    width: 39%;
    margin: 10em auto 10em;
    min-width: 500px;
  }

  .intro-top .p-jap br{
    display: block;
  }

  .p-eng {
    padding-bottom: 1em;
    letter-spacing: .1em;
    font-size: 1.3rem;
  }
  
  .p-jap{
    font-size: 1.4rem;
  }

  .intro-img {
    width: 75%;
    margin: 0 auto 10em;
  }

  .intro-img img{
    height: 60vh;
    object-fit: cover;
  }

  .about-contents{
    border-bottom: 1px solid;
  }

  .about-left, .plan-left, .plan-right, .contact-left{
    width: 50%;
    margin: auto;
    box-sizing: border-box;
  }

  .about-left .pc-size{
    width: 73%;
    margin: auto;
    max-width: 380px;
  }

  .about-right, .contact-right{
    display: block;
    width: 50%;
    padding: 2em;
    box-sizing: border-box;
  }

  .about-right{
    border-left: 1px solid;
  }

  .mid-contents {
    width: 80%;
    margin: 5em auto 5em;
  }

  .plan-contents, .contact-contents{
    flex-direction: row-reverse;
  }

  .plan-left .pc-size{
    width: 70%;
    margin: auto;
    max-width: 370px;
  }

  .plan-right{
    padding: 2em;
    border-right: 1px solid;
    box-sizing: border-box;
  }

  .top-galle{
    display: block;
  }

  .sp-galle{
    display: none;
  }

  .top-galle ul {
    display: flex;
    -webkit-display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: space-between;
    margin: 5em;
  }
  
  .top-galle ul li {
    width: 47%;
    min-width: 410px;
    display: flex;
    -webkit-display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }

  .gl-box03,
  .gl-box06 {
    padding: 3em;
  }

  #galle .btn{
    width: 85%;
    margin: 0 auto 7em;
  }
  
  .sp-contact-img{
    display: none;
  }

  .contact-right{
    border-right: 1px solid;
  }

  .contact-left .pc-size{
    width: 50%;
    margin: auto;
    min-width: 310px;
  }

}