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

/*　ボタン
======================================================= */
[class*="dec-btn"] {
  border-radius: 80px;
  border: 2px solid;
  box-shadow: 0 0 12px #7b52a8;
  display: inline-block;
  text-decoration: none;
  transition: 0.5s;
  max-width: 100%;
}

/* base */
.dec-btn--primary {
  background-color: #c9b7dc;
  border-color: #c9b7dc;
  color: #fff;
}
.dec-btn--secondary {
  background-color: #95e4e6;
  border-color: #95e4e6;
  color: #fff;
}
.dec-btn--attention {
  background-color: #d3191c;
  border-color: #d3191c;
  color: #fff;
}
.dec-btn--dark {
  background-color: #6d6d6d;
  border-color: #6d6d6d;
  color: #fff;
}
.dec-btn--light {
  background-color: #e8e1ef;
  border-color: #e8e1ef;
  color: #535353;
}
.dec-btn--grey {
  background-color: #ddd;
  border-color: #ddd;
  color: #535353;
}

/* outline */
[class*="dec-btn-ol"] {
  background-color: transparent;
  border: 2px solid;
}
.dec-btn-ol--primary {
  border-color: #c9b7dc;
  color: #535353;
}
.dec-btn-ol--secondary {
  border-color: #95e4e6;
  color: #535353;
}
.dec-btn-ol--attention {
  border-color: #d3191c;
  color: #d3191c;
}
.dec-btn-ol--dark {
  border-color: #6d6d6d;
  color: #6d6d6d;
}
.dec-btn-ol--light {
  border-color: #c9b7dc;
  color: #535353;
}
.dec-btn-ol--grey {
  border-color: #ddd;
  color: #535353;
}

/* hover・focus */
[class*="dec-btn"]:hover,
[class*="dec-btn"]:focus {
  opacity: 1;
  text-decoration: none;
}
.dec-btn--primary:hover,
.dec-btn--primary:focus,
.dec-btn--secondary:hover,
.dec-btn--secondary:focus {
  background-color: #eeecf1;
  border-color: #eeecf1;
  color: #fff;
}
.dec-btn--light:hover,
.dec-btn--light:focus,
.dec-btn--grey:hover,
.dec-btn--grey:focus {
  background-color: #eeecf1;
  border-color: #eeecf1;
  color: #535353;
}
.dec-btn--attention:hover,
.dec-btn--attention:focus {
  background-color: #970609;
  border-color: #970609;
  color: #fff;
}
.dec-btn--dark:hover,
.dec-btn--dark:focus {
  background-color: #444;
  border-color: #444;
  color: #fff;
}
.dec-btn-ol--primary:hover,
.dec-btn-ol--primary:focus,
.dec-btn-ol--secondary:hover,
.dec-btn-ol--secondary:focus,
.dec-btn-ol--light:hover,
.dec-btn-ol--light:focus,
.dec-btn-ol--grey:hover,
.dec-btn-ol--grey:focus {
  border-color: #eeecf1;
  color: #535353;
}
.dec-btn-ol--attention:hover,
.dec-btn-ol--attention:focus {
  border-color: #970609;
  color: #970609;
}
.dec-btn-ol--dark:hover,
.dec-btn-ol--dark:focus {
  border-color: #444;
  color: #444;
}

/* size */
.dec-btn--size-lg { padding: 3rem 24rem;}
.dec-btn--size-md { padding: 2rem 12rem;}
.dec-btn--size-sm { padding: 1rem 3rem;}


/*　罫線
======================================================= */
.dec-line--primary,
.dec-line-pe--primary::before,
.dec-line-pe--primary::after {
  border-color: #7accd9;
}
.dec-line--secondary,
.dec-line-pe--secondary::before,
.dec-line-pe--secondary::after {
  border-color: #95e4e6;
}
.dec-line--attention,
.dec-line-pe--attention::before,
.dec-line-pe--attention::after {
  border-color: #d3191c;
}
.dec-line--dark,
.dec-line-pe--dark::before,
.dec-line-pe--dark::after {
  border-color: #6d6d6d;
}
.dec-line--light,
.dec-line-pe--light::before,
.dec-line-pe--light::after {
  border-color: #e8e1ef;
}
.dec-line--grey,
.dec-line-pe--grey::before,
.dec-line-pe--grey::after {
  border-color: #ddd;
}


/*　背景
======================================================= */
.dec-bg--primary,
.dec-bg-pe--primary::before,
.dec-bg-pe--primary::after {
  background-color: #7accd9;
  color: #535353;
}
.dec-bg--secondary,
.dec-bg-pe--secondary::before,
.dec-bg-pe--secondary::after {
  background-color: #95e4e6;
  color: #535353;
}
.dec-bg--attention,
.dec-bg-pe--attention::before,
.dec-bg-pe--attention::after {
  background-color: #d3191c;
  color: #fff;
}
.dec-bg--dark,
.dec-bg-pe--dark::before,
.dec-bg-pe--dark::after {
  background-color: #6d6d6d;
  color: #fff;
}
.dec-bg--light,
.dec-bg-pe--light::before,
.dec-bg-pe--light::after {
  background-color: #e8e1ef;
  color: #535353;
}
.dec-bg--grey,
.dec-bg-pe--grey::before,
.dec-bg-pe--grey::after {
  background-color: #ddd;
  color: #535353;
}


/*　テキスト
======================================================= */
.dec-txt--primary,
.dec-txt-pe--primary::before,
.dec-txt-pe--primary::after {
  color: #7accd9;
}
.dec-txt--secondary,
.dec-txt-pe--secondary::before,
.dec-txt-pe--secondary::after {
  color: #95e4e6;
}
.dec-txt--attention,
.dec-txt-pe--attention::before,
.dec-txt-pe--attention::after {
  color: #d3191c;
}
.dec-txt--dark,
.dec-txt-pe--dark::before,
.dec-txt-pe--dark::after {
  color: #535353;
}
.dec-txt--light,
.dec-txt-pe--light::before,
.dec-txt-pe--light::after {
  color: #c9b7dc;
}
.dec-txt--grey,
.dec-txt-pe--grey::before,
.dec-txt-pe--grey::after {
  color: #ddd;
}


/*　ボックス
======================================================= */
[class*="dec-box-"] {
  border-radius: 10px;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,.1), inset -3px -3px 7px  rgba(255,255,255,.2);
  padding: 15px;
}

.dec-box--primary,
.dec-box-pe--primary::before,
.dec-box-pe--primary::after  {
  background-color: #eeecf1;
  border: 1px solid #7accd9;
}
.dec-box--secondary,
.dec-box-pe--secondary::before,
.dec-box-pe--secondary::after  {
  background-color: #95e4e6;
  border: 1px solid #95e4e6;
}
.dec-box--attention,
.dec-box-pe--attention::before,
.dec-box-pe--attention::after  {
  background-color: #f9dbdc;
  border: 1px solid #f9dbdc;
}
.dec-box--dark,
.dec-box-pe--dark::before,
.dec-box-pe--dark::after  {
  background-color: #6d6d6d;
  border: 1px solid #6d6d6d;
  color: #fff;
}
.dec-box--light,
.dec-box-pe--light::before,
.dec-box-pe--light::after  {
  background-color: #e8e1ef;
  border: 1px solid #e8e1ef;
}
.dec-box--grey,
.dec-box-pe--grey::before,
.dec-box-pe--grey::after  {
  background-color: transparent;
  border: none;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,.1), inset -3px -3px 7px  rgba(255,255,255,.5);
}

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