/* =============================================================
   共通ボタンスタイル
   各ページ・セクションで再利用するボタンの共通ルールをここに集約
   ============================================================= */

/* =============================================================
   .btn-more-link  ─ 「詳しい〜はこちら / もっと見る」型の青枠リンクボタン
     - 旧 .vps-pricing__more-link / .vps-options__more-link を統合
     - 青枠・白背景・hover で青塗り反転、右矢印アイコン付き
     - 用途：料金プラン詳細、オプション詳細、利用フロー詳細 など

   構造（HTML）：
     <div class="btn-more-link__wrap">
       <a href="#" class="btn-more-link">テキスト</a>
     </div>
   ============================================================= */

/* ── ラッパー（中央寄せ） ── */
.btn-more-link__wrap {
  text-align: center;
}

/* ── ボタン本体 ── */
.btn-more-link {
  display: grid;
  grid-template-columns: auto 16px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 385px;
  height: 65px;
  margin: 0 auto;
  background: #ffffff;
  color: #1977f2;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #1977f2;
  border-radius: 10px;
  transition: all 0.3s ease;
}

/* 右矢印アイコン（10 × 16px：vps-pricing と vps-options の中間値）*/
.btn-more-link::after {
  content: "";
  width: 10px;
  height: 16px;
  background: url("../../img/common/icon_arrow-blue.svg") center / contain no-repeat;
}

.btn-more-link:hover,
.btn-more-link:focus-visible {
  background: #1977f2;
  color: #ffffff;
  opacity: 1;
}

.btn-more-link:hover::after,
.btn-more-link:focus-visible::after {
  background-image: url("../../img/common/icon_arrow-white.svg");
}

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 900px) {
  .btn-more-link {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .btn-more-link {
    max-width: 343px;
    height: 52px;
    font-size: 16px;
  }
}