/* ========== ガイド（横並び正方形）========== */
.guide.squareish {
  display: flex;
}

.guide.squareish .tile {
  aspect-ratio: 1/1.05;
  background-size: cover;
  background-position: center
}

.guide {
  position: relative;
  min-height: 70%;
  width: 100%;
  color: #fff;
  text-decoration: none;
  background-size: cover;
  background-position: center
}
/* ========== tiles ========== */
.tiles {
  display: grid;
  grid-auto-columns: 80%;
  place-content: center;
}

.tile {
  position: relative;
  min-height: 500px;
  color: #fff;
  margin-bottom: 5vh;
  text-decoration: none;
  background-size: cover;
  background-position: center
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45))
}

.tile-inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  height: 100%;
  text-align: center;
  gap: 8px
}
.order-title {
  font-size: 34px;
}

/* スマホでは全幅ボタンに */
@media (max-width: 768px) {
  .guide.squareish {
    display: grid;
    margin: 0;
  }
  .tile-inner{
    margin: 0;
    height: 300px;
  }
  .order-title {
    margin: 0;
  }
  .p {
    margin: 0;
  }
}