// =====================================================================================
//
// cta_01
//
// =====================================================================================

@use 'scss/global' as g;

// -------------------------------------------------------------------------------------
// 変数
// -------------------------------------------------------------------------------------

// 全体枠の背景色
$color_bg: #f0f0f0;

// -------------------------------------------------------------------------------------
// 全体枠
// -------------------------------------------------------------------------------------
.cta_01 {
  padding: 40px 0 28px;
  background: $color_bg;

  @include g.mq(tablet, pc) {
    padding-bottom: 104px;
  }
}

// -------------------------------------------------------------------------------------
// 全体枠 > 内枠（コンテンツの幅調整用）
// -------------------------------------------------------------------------------------
.cta_01--inner {
  @include g.holder();

  text-align: center;
}

// -------------------------------------------------------------------------------------
// 全体枠 > 内枠 > タイトル
// -------------------------------------------------------------------------------------
.cta_01--title {
  margin: 0 0 56px;
  font-size: g.$font_size_h3;
  line-height: 1;
}

// -------------------------------------------------------------------------------------
// 全体枠 > 内枠 > 説明テキスト
// -------------------------------------------------------------------------------------
.cta_01--text {
  margin: 0 0 40px;

  @include g.mq(tablet, pc) {
    margin-bottom: 56px;
  }
}

// -------------------------------------------------------------------------------------
// 全体枠 > 内枠 > ボタン外枠
// -------------------------------------------------------------------------------------
.cta_01--btn_box {
  display: grid;
  grid-auto-columns: 260px;
  grid-gap: 32px 0;
  gap: 32px 0;
  justify-content: center;

  @include g.mq(tablet) {
    grid-template-columns: 352px 352px;
    justify-content: space-between;
    width: 736px;
    margin: 0 auto;
  }

  @include g.mq(pc) {
    grid-template-columns: 360px 360px;
    justify-content: space-between;
    width: 760px;
    margin: 0 auto;
  }
}