@charset "UTF-8";
[class*="bnr-012"] .bnr-area-bg {
  padding: 30px 15px;
}
[class*="bnr-012"] .bnr-area-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 220px;
  max-width: 100%;
  min-height: 150px;
  margin: auto;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
}
/*IE対応*/
_:-ms-input-placeholder, :root [class*="bnr-012"] .bnr-area-text {
  display: block;
}

[class*="bnr-012"] .bnr-catch-desc {
  margin-top: 5px;
  margin-bottom: 5px;
}
[class*="bnr-012"] .bnr-catch {
  font-size: 24px;
  margin-top: 5px;
  margin-bottom: 5px;
}
[class*="bnr-012"] .bnr-desc {
  margin-top: 6px;
  margin-bottom: 6px;
}
[class*="bnr-012"] .bnr-area-btn {
  margin-top: 8px;
  margin-bottom: 5px;
}
[class*="bnr-012"] .bnr-btn-inner {
  padding: 10px 20px 10px 42px;
  font-size: 16px;
}
[class*="bnr-012"] .bnr-btn[class*="002"] .bnr-btn-inner,
[class*="bnr-012"] .bnr-btn[class*="004"] .bnr-btn-inner {
  padding: 10px 26px 10px 38px;
}

[class*="bnr-012"] {
  font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝", serif;
}

/*アイコン*/
[class*="bnr-012"] .icon-mobile-phone {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 18px;
  font-size: 28px;
}
@media screen and (min-width: 1200px) {
  [class*="bnr-012"] .bnr-area-text {
    width: 270px;
    max-width: 100%;
  }
}

@media screen and (max-width: 1199px) {
  .bnr-center-fixed[class*="bnr-012"] .bnr-btn-inner {
    padding: 10px 14px 10px 38px;
  }
  .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="002"] .bnr-btn-inner,
  .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="004"] .bnr-btn-inner {
    padding: 10px 22px 10px 30px;
  }
  .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="002"] .icon-mobile-phone,
  .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="004"] .icon-mobile-phone {
    left: 12px;
  }
  .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="002"] .icon-chevron-right,
  .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="004"] .icon-chevron-right {
    font-size: 12px;
  }
  .span3 .bnr-center-fixed[class*="bnr-012"] .bnr-btn-inner {
    padding: 10px 16px 10px 36px;
    font-size: 13px;
  }
  .span3 .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="002"] .bnr-btn-inner,
  .span3 .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="004"] .bnr-btn-inner {
    padding: 10px 20px 10px 30px;
  }
}

@media screen and (max-width: 979px) {
  .span3 .bnr-center-fixed[class*="bnr-012"] .bnr-btn-inner {
    padding: 6px 16px 6px 36px;
  }
  .span3 .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="002"] .bnr-btn-inner,
  .span3 .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="004"] .bnr-btn-inner {
    padding: 6px 16px 6px 28px;
  }
  .span3 .bnr-center-fixed[class*="bnr-012"] .bnr-area-btn {
    margin-top: 5px;
  }
}

@media screen and (min-width: 768px) {
  .container-size-superwide [class*="bnr-012"] .bnr-area-text {
    min-width: 23.404255319148934%;
    max-width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .span5 .bnr-center-fixed[class*="bnr-012"] .bnr-btn-inner {
    padding: 10px 14px 10px 38px;
    font-size: 16px;
  }
  .span4 .bnr-center-fixed[class*="bnr-012"] .bnr-btn-inner {
    padding: 10px 14px 10px 38px;
    font-size: 16px;
  }
  .span4 .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="002"] .bnr-btn-inner,
  .span4 .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="004"] .bnr-btn-inner {
    padding: 10px 22px 10px 30px;
  }
  .span3 .bnr-center-fixed[class*="bnr-012"] .bnr-area-btn {
    margin-top: 8px;
  }
  .span3 .bnr-center-fixed[class*="bnr-012"] .bnr-btn-inner {
    padding: 10px 14px 10px 38px;
    font-size: 16px;
  }
  .span3 .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="002"] .bnr-btn-inner,
  .span3 .bnr-center-fixed[class*="bnr-012"] .bnr-btn[class*="004"] .bnr-btn-inner {
    padding: 10px 22px 10px 30px;
  }
}

/*マウスオーバー画像色変更*/
a .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg {
  transition: all 0.3s;
}
/*赤*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-red {
  background-color: rgba(243, 183, 183, 0.8) !important;
}
/*橙*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-orange {
  background-color: rgba(243, 209, 183, 0.8) !important;
}
/*黄*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-yellow {
  background-color: rgba(243, 237, 183, 0.8) !important;
}
/*黄緑*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-yellowgreen {
  background-color: rgba(221, 243, 183, 0.8) !important;
}
/*緑*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-green {
  background-color: rgba(183, 243, 195, 0.8) !important;
}
/*アクア*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-aqua {
  background-color: rgba(183, 222, 243, 0.8) !important;
}
/*青*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-blue {
  background-color: rgba(183, 200, 243, 0.8) !important;
}
/*茶色*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-brown {
  background-color: rgba(199, 176, 143, 0.8) !important;
}
/*ピンク*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-pink {
  background-color: rgba(241, 189, 217, 0.8) !important;
}
/*紫*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-purple {
  background-color: rgba(205, 183, 243, 0.8) !important;
}
/*黒*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-black {
  background-color: rgba(221, 221, 221, 0.8) !important;
}
/*白*/
a:hover .bnr-bgwhole-textwhole[class*="bnr-012"] .bnr-area-text.bnr-bg-white {
  background-color: rgba(255, 255, 255, 0.8) !important;
}