@charset "UTF-8";

#container {
  background: none;
}

header{
	height: min(15vh, 118px);
	display: none;
}

#main {
  background: url(../img/suikatsu_bg.webp) no-repeat 0 0;
  background-size: cover;
  min-height: 875px;
  padding-bottom: clamp(30px,7.5vw,100px);
}

#main h2 {
  width: 100%;
  max-width: 617px;
  height: auto;
}

.comingsoon {
  margin: 0 auto;
  padding: 25px 0 38px;
  
  padding: 50px 0 38px;
}

.btn_suikatsu {
  display: block;
  margin: 0 auto 16px;
  max-width: 400px;
  padding: 0 20px;
}

.btn_suikatsu:last-of-type {
  margin-bottom: clamp(28px,3.8vw,38px);
}

.movie{
  margin: clamp(28px,4vw,45px) auto clamp(35px,4.25vw,45px);
  width: min(90%, 760px);
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tel img {
  padding: 0 5px;
  border-radius: 9px;
  background: rgb(255, 255, 255, .75);
  box-shadow: 0 0 7px 7px rgb(255, 255, 255, .75);
}

.tel a:hover img {
  background: rgb(255, 255, 255, 1);
  box-shadow: 0 0 7px 7px rgb(255, 255, 255, 1);
}

#contact .tel a {
  margin-bottom: 12px;
}

#footer {
  margin-top: 0;
  background: none;
}



@media screen and (max-width: 959px) {
  #main {
    background-size: auto 100%;
  }
}

@media screen and (max-width: 768px) {
  #main {
    min-height: unset;
  }

  #main h2 {
    max-width: 85%;
  }

  #main h2 img {
    max-width: 100%;
  }

  .comingsoon {
    margin: 0 auto;
    padding: 26px 0 7.5vw;
    padding: 35px 0 7.5vw;
  }

  #contact .tel a {
    width: 80%;
    max-width: 500px;
  }
}