.gltop {
  position: relative;
  width: 85%;
  margin: 8em auto;
}

.gl02 {
  display: none;
}

.gltop h3 {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateY(-55%) translateX(-50%);
  border-top: none;
  border-bottom: none;
}

.gl-contents{
  width: 85%;
  margin: 0 auto 3em;
  display: flex;
  -webkit-display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: space-between;
}

.gl-contents img {
  width: 100%;
  margin-bottom: 5em;
}

.gl-contents .sp-only, .gl-contents .sp-height {
  width: 100%;
}

.gl-contents .sp-only img, .gl-contents .sp-height img {
  height: 60vh;
  object-fit: cover;
}

.gl-contents .gl04, .gl-contents .gl05, .gl-contents .sp-width {
  width: 46.5%;
}

.gl-contents .gl05 {
  padding-top: 1.5em;
}

.gl03-left, .sp-nodisplay{
  display: none;
}

.sp-width {
  align-content: center;
  display: grid;
}

@media (min-width: 834px) {

  .gltop {
    width: 90%;
    margin: 3em auto;
  }

  .gl02{
    display: block;
    padding-top: 5em;
  }

  .sp-only{
    display: none;
  }

  .gl-contents{
    width: 90%;
  }

  .gl03-left, .sp-nodisplay{
    display: block;
  }

  .gl01, .gl02, .gl03, .gl04, .gl05 {
    width: 46.5%;
  }

  .gl01 img, .gl02 img, .gl04 img, .gl05 img {
    height: 82vh;
    object-fit: cover;
    max-height: 600px;
  }

  .gl03 {
    align-content: center;
    display: grid;
  }

  .gl-wide{
    width: 80%;
    margin: auto;
  }

  .gl-contents .gl-wide img {
    height: 65vh;
    object-fit: cover;
    max-height: 550px;
  }

  .gl-contents .sp-height{
    width: 46.5%;
  }

  .gl-contents .sp-height img {
    height: 82vh;
  }

  .gl04 {
    padding-top: 7em;
  }

}