@charset "utf-8";
/* ==========================================================================
   cta-mikata.css — 請求管理ロボの3ボタンCTA (.c-cta-mikata)
   partial: components/cta-mikata.html / shortcode: {{< c-cta-mikata >}}

   旧 .point_area + .point-area-cta（point_area.css ほか）の見た目を移したもの。
   設計ルールは components.css 冒頭に従う（c- プレフィックス・px 指定・要素まで明示）。

   見出しの .txt_bdr / .strong / .strong_mid は BEM にしていない。
   既存ページの見出しHTMLをそのまま title に移せるようにするため。部品の外には効かない。
   ========================================================================== */

.c-cta-mikata,
.c-cta-mikata *,
.c-cta-mikata *::before,
.c-cta-mikata *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }

.c-cta-mikata { width: 95%; max-width: 1000px; margin: 0 auto; text-align: center; }
.c-cta-mikata__inner { position: relative; width: 100%; max-width: 980px; margin: 0 auto; padding: 50px 0 40px; }
/* 小泉さんの画像。装飾なので背景で出し、SPでは消す */
.c-cta-mikata__inner::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 244px; height: 290px;
  background: url(/service/mikata/images/product/img_koizumi.png) center/cover no-repeat;
}
.c-cta-mikata__body { padding-left: 170px; }

/* 見出し（h2 / h3 / p のどれで出ても同じ見た目） */
.c-cta-mikata .c-cta-mikata__ttl { margin: 0 0 20px; padding: 0; color: #2f6087; font-size: 26px; font-weight: bold; line-height: 1.3; text-align: center; }
.c-cta-mikata__ttl span { color: #2f6087; font-size: 26px; font-weight: bold; }
.c-cta-mikata__ttl span.strong { font-size: 130%; }
.c-cta-mikata__ttl span.strong_mid { font-size: 120%; }
.c-cta-mikata__ttl span.txt_bdr { background: linear-gradient(transparent 50%, #fffc9f 50%); }

.c-cta-mikata .c-cta-mikata__note { margin: 0 0 20px; color: #2f6087; font-size: 13px; line-height: 1.5; text-align: center; }

/* ボタン */
.c-cta-mikata__btns {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  width: 100%; max-width: 830px; margin: 0 auto;
}
.c-cta-mikata .c-cta-mikata__btn {
  position: relative; overflow: hidden;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  width: 31%; max-width: 300px; margin: 0 auto; padding: 15px 10px;
  border-radius: 5px; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  text-align: center; text-decoration: none;
  -webkit-transition: 0.3s; transition: 0.3s;
}
/* ボタンが2つ・1つのときは幅を広げる（830px の行に 400px × 2 で、間隔は3つのときとほぼ同じ 30px） */
.c-cta-mikata .c-cta-mikata__btns--n2 .c-cta-mikata__btn,
.c-cta-mikata .c-cta-mikata__btns--n1 .c-cta-mikata__btn { width: 48.2%; max-width: 400px; }
/* ホバーで斜めの帯が右から流れて全面を覆う */
.c-cta-mikata__btn::after {
  content: ""; position: absolute; top: 0; right: -10%; z-index: 0; display: block; width: 10%; height: 120%;
  -webkit-transform: skewX(-45deg); transform: skewX(-45deg);
  -webkit-transition: 0.3s; transition: 0.3s;
}
.c-cta-mikata__btn:hover::after { width: 115%; }
/* ホスト側の a:hover { opacity: .7 }（テンプレートページ等）で帯の演出と二重にならないよう打ち消す */
.c-cta-mikata .c-cta-mikata__btn:hover { opacity: 1; }
.c-cta-mikata .c-cta-mikata__btn span { position: relative; z-index: 1; color: #fff; font-size: 18px; font-weight: bold; line-height: 1.5; }

.c-cta-mikata__btn--doc { background-color: #e16c64; }
.c-cta-mikata__btn--doc::after { background-color: #d2663d; }
.c-cta-mikata__btn--price { background-color: #f7a42d; }
.c-cta-mikata__btn--price::after { background-color: #c48529; }
.c-cta-mikata__btn--diff { background-color: #217fc4; }
.c-cta-mikata__btn--diff::after { background-color: #30638b; }

/* 768px でなく 800px で縦並びにするのは、769〜800px だと3列の幅が足りず
   「他社との違いを見る」が2行に折り返してボタンの高さが揃わないため */
@media screen and (max-width: 800px) {
  .c-cta-mikata__btns { display: block; }
  .c-cta-mikata .c-cta-mikata__btns .c-cta-mikata__btn { width: 100%; max-width: 300px; }
  .c-cta-mikata .c-cta-mikata__btn + .c-cta-mikata__btn { margin-top: 10px; }
}

@media screen and (max-width: 640px) {
  .c-cta-mikata__inner { padding: 5.33333vw 0; }
  .c-cta-mikata__inner::before { display: none; }
  .c-cta-mikata__body { padding-left: 0; }
  .c-cta-mikata .c-cta-mikata__ttl { margin-bottom: 2.66667vw; font-size: 4.26667vw; }
  .c-cta-mikata__ttl span { font-size: 4.26667vw; }
}

@media screen and (max-width: 500px) {
  .c-cta-mikata__btns { margin-top: 20px; }
}