@charset "utf-8";
/* CSS Document */

/*　ボタン
======================================================= */
[class*="dec-btn"] {
  display: inline-block;
  text-decoration: none !important;
  max-width: 100%;
}

/* base */
.dec-btn--primary {
  background-color: #444 !important;
  color: #fff !important;
}
.dec-btn--secondary {
  background-color: #aaa !important;
  color: #fff !important;
}
.dec-btn--attention {
  background-color: #d3191c !important;
  color: #fff !important;
}
.dec-btn--dark {
  background-color: #333 !important;
  color: #fff !important;
}
.dec-btn--light {
  background-color: #d6d6d6 !important;
  color: #333 !important;
}
.dec-btn--grey {
  background-color: #f6f6f6 !important;
  color: #333 !important;
}

/* outline */
[class*="dec-btn-ol"] {
  background-color: #fff !important;
  border: 2px solid;
  font-weight: bold;
}
[class*="dec-btn-ol"]:before {
  background: url(../images/common/linkmark.png) no-repeat left center;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 9px;
  padding: 0 12px 0 0;
  width: 6px;
}
.dec-btn-ol--primary {
  border-color: #444 !important;
  color: #333 !important;
}
.dec-btn-ol--secondary {
  border-color: #aaa !important;
  color: #333 !important;
}
.dec-btn-ol--attention {
  border-color: #d3191c !important;
  color: #d3191c !important;
}
.dec-btn-ol--attention:before {
  display: none;
}
.dec-btn-ol--dark {
  border-color: #333 !important;
  color: #333 !important;
}
.dec-btn-ol--light {
  border-color: #d6d6d6 !important;
  color: #333 !important;
}
.dec-btn-ol--grey {
  border-color: #f6f6f6 !important;
  color: #333 !important;
}

/* hover・focus */
[class*="dec-btn"]:hover,
[class*="dec-btn"]:focus {
  opacity: .6;
  text-decoration: none !important;
}
.dec-btn--primary:hover,
.dec-btn--primary:focus,
.dec-btn--secondary:hover,
.dec-btn--secondary:focus,
.dec-btn--attention:hover,
.dec-btn--attention:focus,
.dec-btn--dark:hover,
.dec-btn--dark:focus {
  color: #fff !important;
}
.dec-btn--light:hover,
.dec-btn--light:focus,
.dec-btn--grey:hover,
.dec-btn--grey:focus {
  color: #333 !important;
}
.dec-btn-ol--primary:hover,
.dec-btn-ol--primary:focus,
.dec-btn-ol--secondary:hover,
.dec-btn-ol--secondary:focus,
.dec-btn-ol--dark:hover,
.dec-btn-ol--dark:focus,
.dec-btn-ol--light:hover,
.dec-btn-ol--light:focus,
.dec-btn-ol--grey:hover,
.dec-btn-ol--grey:focus {
  color: #333 !important;
}
.dec-btn-ol--attention:hover,
.dec-btn-ol--attention:focus {
  color: #d3191c !important;
}

/* size */
.dec-btn--size-lg { padding: 1.785rem 17.1428rem;}
.dec-btn--size-md { padding: 1.0714rem 8.5714rem;}
.dec-btn--size-sm { padding: .3571rem 2.142rem;}


/*　罫線
======================================================= */
.dec-line--primary,
.dec-line-pe--primary::before,
.dec-line-pe--primary::after {
  border-color: #444 !important;
}
.dec-line--secondary,
.dec-line-pe--secondary::before,
.dec-line-pe--secondary::after {
  border-color: #aaa !important;
}
.dec-line--attention,
.dec-line-pe--attention::before,
.dec-line-pe--attention::after {
  border-color: #d3191c !important;
}
.dec-line--dark,
.dec-line-pe--dark::before,
.dec-line-pe--dark::after {
  border-color: #444 !important;
}
.dec-line--light,
.dec-line-pe--light::before,
.dec-line-pe--light::after {
  border-color: #d6d6d6 !important;
}
.dec-line--grey,
.dec-line-pe--grey::before,
.dec-line-pe--grey::after {
  border-color: #ccc !important;
}


/*　背景
======================================================= */
.dec-bg--primary,
.dec-bg-pe--primary::before,
.dec-bg-pe--primary::after {
  background-color: #444 !important;
  color: #fff !important;
}
.dec-bg--secondary,
.dec-bg-pe--secondary::before,
.dec-bg-pe--secondary::after {
  background-color: #aaa !important;
  color: #fff !important;
}
.dec-bg--attention,
.dec-bg-pe--attention::before,
.dec-bg-pe--attention::after {
  background-color: #d3191c !important;
  color: #fff !important;
}
.dec-bg--dark,
.dec-bg-pe--dark::before,
.dec-bg-pe--dark::after {
  background-color: #333 !important;
  color: #fff !important;
}
.dec-bg--light,
.dec-bg-pe--light::before,
.dec-bg-pe--light::after {
  background: url(../images/common/bg.png) repeat top left !important;
  color: #333 !important;
}
.dec-bg--grey,
.dec-bg-pe--grey::before,
.dec-bg-pe--grey::after {
  background-color: #f6f6f6 !important;
  color: #333 !important;
}

.dec-bg--contents,
.dec-bg-pe--contents::before,
.dec-bg-pe--contents::after {
  background: #fff !important;
}
#footer .dec-bg--contents,
#footer .dec-bg-pe--contents::before,
#footer .dec-bg-pe--contents::after{
  background: url(../images/common/footer_bg.png) repeat top left !important;
}


/*　テキスト
======================================================= */
.dec-txt--primary,
.dec-txt-pe--primary::before,
.dec-txt-pe--primary::after {
  color: #444 !important;
}
.dec-txt--secondary,
.dec-txt-pe--secondary::before,
.dec-txt-pe--secondary::after {
  color: #aaa !important;
}
.dec-txt--attention,
.dec-txt-pe--attention::before,
.dec-txt-pe--attention::after {
  color: #d3191c !important;
}
.dec-txt--dark,
.dec-txt-pe--dark::before,
.dec-txt-pe--dark::after {
  color: #333 !important;
}
.dec-txt--light,
.dec-txt-pe--light::before,
.dec-txt-pe--light::after {
  color: #d6d6d6 !important;
}
.dec-txt--grey,
.dec-txt-pe--grey::before,
.dec-txt-pe--grey::after {
  color: #ccc !important;
}


/*　ボックス
======================================================= */
.dec-box--primary,
.dec-box-pe--primary::before,
.dec-box-pe--primary::after  {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #444 !important;
  border-radius: 0;
}
.dec-box--secondary,
.dec-box-pe--secondary::before,
.dec-box-pe--secondary::after  {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #aaa !important;
  border-radius: 0;
}
.dec-box--attention,
.dec-box-pe--attention::before,
.dec-box-pe--attention::after  {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #d3191c !important;
  border-radius: 0;
}
.dec-box--dark,
.dec-box-pe--dark::before,
.dec-box-pe--dark::after  {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #333 !important;
  border-radius: 0;
}
.dec-box--light,
.dec-box-pe--light::before,
.dec-box-pe--light::after  {
  background: url(../images/common/bg.png) repeat top left;
  border: none;
  border-radius: 0;
}
.dec-box--grey,
.dec-box-pe--grey::before,
.dec-box-pe--grey::after  {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc !important;
  border-radius: 0;
}
[class*="dec-box-"] {
  padding: 15px;
}

/* スマホ以外 */
@media (min-width: 768px) {
  [class*="dec-box-"] {
    padding: 30px;
  }
}