No notes defined.
<section class="cta_01">
<div class="cta_01--inner">
<h2 class="cta_01--title">{{title}}</h2>
<p class="cta_01--text">{{message}}</p>
<div class="cta_01--btn_box">
<a href="{{form_url}}" class="btn btn-block btn-primary">{{form_label}}</a>
<a href="tel:{{tel_number}}" class="btn btn-block btn-primary">{{tel_label}}</a>
</div>
</div>
</section><!-- /.cta_01 -->
{
"title": "お問い合わせ",
"message": "お気軽にお問い合わせください",
"form_url": null,
"form_label": "お問い合わせフォーム",
"tel_number": 0,
"tel_label": "00-0000-0000"
}
// =====================================================================================
//
// 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;
}
}