/* ========== contact band ========== */
.contact-band {
  background: var(--brand);
  color: #fff;
  margin: 10vh 10vw 10vh;
  padding-block: 2rem;
}

.contact-inner {
  display: flex;
  align-items: center;
  gap: 5vw;
  padding: 2vw 2vw 6vh 5vw;
}

.contact-text {
  margin-top: -5vh;
}

.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
  color: var(--ink);
  padding: 14px 36px;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, .15);
  /* 追加：右端へ押し出し＆幅を大きく */
  margin-left: auto;
  /* ← 右に寄せる決め手 */
  min-width: 30vw;
  /* ← 横幅を伸ばす（可変） */
  white-space: nowrap;
  /* 文字折返し防止 */
}
.tile {
  position: relative;
  min-height: 500px;
  color: #fff;
  margin-bottom: 5vh;
  text-decoration: none;
  background-size: cover;
  background-position: center
}


/* スマホでは全幅ボタンに */
@media (max-width: 768px) {
  .contact-inner {
    flex-direction: column;
    align-items: center;      /* 左寄せ → 中央寄せ */
    justify-content: center;  /* 上下方向も中央寄せしたい場合 */
    text-align: center;       /* 中のテキストも中央揃え */
    padding: 6vh 5vw;
  }

  .btn-solid {
    margin-left: 0;
    width: 100%;
  }

  .contact-text {
    text-align: center;
    max-width: 200px;
    margin-inline: auto;      /* テキストブロック自体も中央に */
  }
  .contact-band {
    background: var(--brand);
    color: #fff;
    margin: 12vh 10vw 20vh;
    padding-block: 2rem;
  }
}