@charset "utf-8";

img {
  width: 100%;
}

#headOffice,
#fuji,
#soi39,
#thonglo,
#udom,
#fuji4,
#meeting {
  padding-bottom: 120px;
}

.container {
  display: grid;
}

#fuji .container,
#thonglo .container,
#udom .container,
#meeting .container {
  grid-template-rows   : 4em 1fr;
  grid-template-columns: 1fr 320px;
}

#fuheadOfficeji .container,
#soi39 .container,
#fuji4 .container {
  grid-template-rows   : 4em 1fr;
  grid-template-columns: 320px 1fr;
}

#fuji h2,
#udom h2,
#meeting h2 {
  grid-row        : 1 / 2;
  grid-column     : 1 / 2;
  margin          : 0 15px 5px 0;
  color           : white;
  background-color: #0eb31b;
}

#fuji .container a,
#udom .container a,
#meeting .container a {
  grid-row   : 1 / 3;
  grid-column: 2 / 3;
}

#fuji .container p,
#udom .container p,
#meeting .container p {
  grid-row   : 2 / 3;
  grid-column: 1 / 2;
  margin     : 0 15px 0 0;
  border     : 2px solid #0eb31b;
}

#headOffice .container,
#soi39 .container,
#fuji4 .container {
  grid-template-rows   : 3em 1fr;
  grid-template-columns: 320px 1fr;
}

#headOffice h2,
#soi39 h2,
#fuji4 h2 {
  grid-row        : 1 / 2;
  grid-column     : 2 / 3;
  margin          : 0 0 5px 15px;
  background-color: #bde995;
}

#headOffice .container a,
#soi39 .container a,
#fuji4 .container a {
  grid-row   : 1 / 3;
  grid-column: 1 / 2;
}

#headOffice .container p,
#soi39 .container p,
#fuji4 .container p {
  grid-row   : 2 / 3;
  grid-column: 2 / 3;
  margin     : 0 0 0 15px;
  border     : 2px solid #bde995;
}

.container h2 {
  padding      : 10px 20px;
  font-size    : 20px;
  font-weight  : 700;
  text-align   : center;
  border-radius: 5px;
}

.container p {
  height       : auto;
  padding      : 5px;
  font-size    : 18px;
  line-height  : 25px;
  border-radius: 5px;
}

.photoarea {
  display: flex;
  padding: 15px 0;
}

.photoarea a:not(:last-child) {
  margin-right: 1%;
}

.comment {
  height       : auto;
  margin-top   : 20px;
  margin-bottom: 20px;
  border-top   : 2px solid #70af39;
  border-bottom: 2px solid #70af39;
}

.comment h3 {
  padding-top   : 20px;
  padding-bottom: 10px;
  font-size     : 20px;
  font-weight   : 700;
}

.comment p {
  padding-bottom: 10px;
  font-size     : 18px;
  line-height   : 25px;
}

.address {
  font-size  : 16px;
  line-height: 130%;
}

.map {
  padding-top: 25px;
  text-align : center;
}

.map img {
  width: 80%;
}

@media (max-width:740px) {
  .container {
    display: block;
    margin : 0 2%;
  }

  .container h2,
  .container p {
    margin: 5px 0 !important;
  }

  .comment h3 {
    color      : black;
    text-shadow: none;
    background : none;
    border     : none;
  }

  .comment p {
    margin: 0 .5em;
  }

  .address {
    margin: 0 .5em;
  }
}