@charset "UTF-8";
/* CSS Document */

/* mobile.css */

  .flex-home {
    align-items: flex-start;
    width: 90%;
  }
  #backColor {
    background: none;
  }
  #home {
    background-color: rgb(255, 251, 199);
    margin-top: 0px;
    padding-top: 120px;
    height: 100vh;
  }
  #vision,
  #pack,
  #biz,
  #clean,
  #mgmt,
  #info,
  #access,
  #contact_us section {
    margin-top: 0px;
    padding-top: 100px;
    padding-bottom: 50px;
  }
  #vision {
    background-color: rgb(202, 229, 205);
  }
  #pack {
    background-color: rgb(250, 220, 233);
  }
  #biz {
    background-color: rgb(199, 232, 250);
  }
  #clean {
    background-color: rgb(199, 217, 240);
  }
  #mgmt {
    background-color: rgb(199, 192, 223);
  }
  #info {
    background-color: rgb(236, 243, 207);
  }
  #access {
    background-color: rgb(255, 235, 190);
    padding-bottom: 150px;
  }
  #vision .imgBlock img,
  #biz .imgBlock img {
    width: 200px;
    height: auto;
    margin: 0px;
    margin-top: 30px;
  }
  #pack .wrapBox,
  #mgmt .wrapBox {
    width: 100%;
    margin: 20px auto;
  }
  #clean .contentBox,
  #mgmt .contentBox,
  #info .contentWrap {
    width: 100%;
  }

  .photoPart {
  margin: 0px 15px 15px;
}
  .photoBox img {
    width: 250px;
  }
  footer {
    position: fixed;
    display: block;
    z-index: 999;
    bottom: 0;
    left: 0;
    height: 110px;
  }
  .footWrap {
    padding-top: 5px;
  }
  .footWrap > div {
    text-align: left;
    margin: 0 10px;
    color: #FFF;
    font-size: 0.8em;
    line-height: 1.3em;
  }

  #contact {
    position: fixed;
    display: block;
    z-index: 999;
    right: 10px;
    bottom: 5px
  }
  .contactBt img {
    width: 70px;
    height: auto;
  }



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

  .flex-home {
    align-items: flex-start;
    width: 90%;

  }
  #home {
    background-color: rgb(255, 251, 199);
    padding-top: 110px;
    padding-bottom: 50px;
  }
  #home h1 {
    font-size: 1.7em;
  }
  
  h3 {
    font-size: 1.4em;
  }
  .topCopy {
    font-size: 1.1em;
  }

  #home .mainImage {
    margin-top: 10px;
  }

  #navBlock ul {
    display: none;
  }
  #navBlock p {
    margin-top: 0px;
    width: 50%;
  }
  #contact_us #navBlock p {
    margin-top: 0px;
    width: 100%;
  }
  .flex-container {
    flex-direction: column;
    width: 100%;
  }
  .widthPart {
    padding: 30px 0px;
  }
  #vision,
  #pack,
  #biz,
  #clean,
  #mgmt,
  #info,
  #access,
  #contact_us section {
    margin-top: 0px;
    padding-top: 100px;
  }

  #access {
    padding-bottom: 150px;
  }

  #contact_us section {
    margin-top: 90px;
    margin-bottom: 150px;
  }
  #vision .flex-container {
    flex-direction: column-reverse;
  }
  #pack .wrapBox {
    flex-direction: column;
  }
  .col01 {
    margin: 0 auto;
    width: 70%;
  }
  .col01 img {
    width: 80%;
  }
  #biz .content,
  #vision .content {
    width: 100%;
  }
  #vision .imgBlock,
  #biz .imgBlock {
    margin: 0 auto;
  }
  #clean .imgBlock img {
    width: 80%;
  }
  #clean .contentBox,
  #mgmt .contentBox {
    width: 100%;
  }
  #clean .contentWrap > div {
  width: 100%;
}
  #clean .contentWrap img {
    width: 100%;
  }
  .cleanImg {
    margin-right: 0px;
  }
  .contentWrap {
    align-items: center;
    flex-direction: column;
  }
  
  #info .contentWrap,
  #access .contentWrap,
  .infoBox {
    width: 100%;
  }
  .mapWrap {
  
  width: 100%;
  margin-left: 0%
}
  .photoBox {
  flex-direction: row;
  }
  .infoBox {
    margin-bottom: 30px;
  }

  .coPart {
    padding: 20px;
  }
  .map {
    width: 100%;
    height: auto;
  }
  .map iframe {
    width: 100%;
    height: 100%;
  }
  
  footer {
    position: fixed;
    display: block;
    z-index: 999;
    bottom: 0;
    left: 0;
    height: 130px;
  }
  .footWrap {
    justify-content: flex-start;
    padding-top: 5px;
  }
  .footWrap > div {
    text-align: left;
    margin: 0 10px;
    color: #FFF;
    font-size: 0.8em;
    line-height: 1.3em;
  }

  #contact {
    position: fixed;
    display: block;
    z-index: 999;
    right: 10px;
    bottom: 5px
  }
  .contactBt img {
    width: 70px;
    height: auto;
  }

  .drawer-hamburger {
    padding-top: 10px;
  }

}

@media screen and (max-width: 480px) {
  .flex-home {
    width: 90%;
  }
  #home {
    padding-top: 90px;
    margin-top: 0px;
        height: 100vh;
  }
 .pcImg {
  display: none;
}
 
  .spImg {
  display: block;
}

  #home h1,
  h3 {
    font-size: 1.3em;
  }
  h2 {
    width: 80%;
  }

  .topCopy {
    font-size: 1.1em;
  }
  p.lead {
    text-align: left;
  }
  #home .mainImage {
    margin-top: 10px;
  }
  .spImg {
    width: 100%;
    height: auto;
  }
  #navBlock ul {
    display: none;
  }
  .logo {
    width: 135px;
  }
  #navBlock p {
    margin-top: 0px;
    width: 80%;
  }
  #contact_us #navBlock p {
    margin-top: 0px;
    width: 100%;
  }
  .flex-container {
    flex-direction: column;
    width: 100%;
  }
  #vision .imgBlock img,
  #biz .imgBlock img {
    width: 75%;
    height: auto;
    margin: 0px 30px;
  }


  #vision,
  #pack,
  #biz,
  #clean,
  #mgmt,
  #info,
  #access,
  #contact_us section {
    margin-top: 0px;
    padding-top: 70px;
  }

  .mapWrap {
    width: 100%;
    margin-left: 0%;
  }
  .gmapFloat,
  .ad {
    float: none;
    width: 100%;
  }
  #contact_us section {
    margin-top: 90px;
  }
  #vision .flex-container {
    flex-direction: column-reverse;
  }
  #pack .wrapBox {
    flex-direction: column;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .col01 {
    margin: 0;
    width: 100%;
  }
  #biz .content,
  #vision .content {
    width: 100%;
  }
  #vision .imgBlock,
  #biz .imgBlock {
    margin: 0 auto;
  }

  #pack .content p,
  #clean .content p,
  #mgmt .content p {
    text-align: left;
  }
  #clean .imgBlock img {
    width: 100%;
  }
  #clean .contentBox,
  #mgmt .contentBox {
    width: 100%;
  }
  #clean .contentWrap img {
    width: 100%;
  }
  .cleanImg {
    margin-right: 0px;
  }
  .contentWrap {
    align-items: center;
    flex-direction: column;
  }
  #mgmt .imgBlock {
  width: 80%;
  margin: 10px;
}
  #mgmt .wrapBox {
    flex-direction: column;
  }
  #mgmt .imgBlock img {
    margin: 0px;
  }
  #mgmt .allowBlock img {
    transform: rotate( 90deg);
  }
  #info .contentWrap,
  #access .contentWrap,
  .infoBox {
    width: 100%;
  }
  .infoBox {
    margin-bottom: 30px;
  }
  .infoBox dl,
  .formBox dl {
    flex-direction: column;
  }
.formBox dt {
  width: 100%;
}
  .photoBox {
    margin-left: 0px;
    flex-direction: column;
  }
  .photoBox img {
  width: 100%;
}
   .photoPart {
  margin: 0px 0px 15px;
}
  .coPart {
    padding: 20px;
  }
  .map {
    width: 100%;
    height: auto;
  }
  .map iframe {
    width: 100%;
    height: 100%;
  }
  .caution,
  .formBox {
    width: 100%;
  }
  input[type="text"],
  textarea {
    width: 100%;
  }
  #contact_us section {
    margin-top: 0px;
  }
  footer {
    position: fixed;
    display: block;
    z-index: 999;
    bottom: 0;
    left: 0;
    height: 130px;
    background-image: none;
  }
  .footWrap {
    justify-content: flex-start;
    padding-top: 5px;
    width: 82%;
  }
  .footWrap > div {
    text-align: left;
    margin: 0 10px;
    color: #FFF;
    font-size: 0.8em;
    line-height: 1.3em;
  }


}