/* ===============================================
  * BUTTON *
=============================================== */
.c-button__frame {
  --width: auto;
  --min-width: auto;
  --max-width: auto;
  --height: auto;
  --min-height: auto;
  --max-height: auto;
  --aspect-ratio: auto;
  --padding-vertical: 1.2rem;
  --padding-horizontal: 1.2rem;
  --color-bg: #fff;
  --color-font: var(--color-brand-font-main);
  --color-border: var(--color-font);
  --font-size: 1.6rem;
  --font-weigh: var(--fw-bold);
  --letter-spacing: .025em;
  --line-height: 1.5;
  aspect-ratio: var(--aspect-ratio);
  width: var(--width);
  min-width: var(--min-width);
  max-width: var(--max-width);
  height: var(--height);
  min-height: var(--min-height);
  max-height: var(--max-height);
  padding: var(--padding-vertical) var(--padding-horizontal);
  border: solid 2px var(--color-border);
  border-radius: 0.4rem;
  background: var(--color-bg);
  color: var(--color-font);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  line-height: var(--ine-height);
  letter-spacing: var(--letter-spacing);
  transition: all var(--transition-default);
}
.c-button__frame:disabled {
  -webkit-user-select: none;
     -moz-user-select: none;
  filter: opacity(0.4);
  pointer-events: none;
          user-select: none;
}
.c-button__skin--primary {
  --color-bg: var(--color-brand-main1);
  --color-border: var(--color-brand-main1);
  --color-font: #fff;
}
.c-button__skin--secondary {
  --color-bg: var(--color-brand-main2);
  --color-border: var(--color-brand-main2);
  --color-font: #fff;
}
.c-button__skin--return {
  --color-bg: transparent;
  --color-border: var(--color-brand-main1);
  --color-font: var(--color-brand-main1);
}

/* ===============================================
  * CAMPAIGN ICON *
=============================================== */
.c-cicon__frame {
  --padding-vertical: .4rem;
  --padding-horizontal: .8rem;
  --color-font: #fff;
  display: grid;
  place-content: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--padding-vertical) var(--padding-horizontal);
  border-radius: 0.4rem;
  background: var(--color-bg);
  color: var(--color-font);
  font-weight: var(--fw-bold);
  font-size: 1.2rem;
  line-height: 1;
  font-family: var(--ff-main);
  letter-spacing: 0.025em;
}
.c-cicon__frame[data-cicon="1"] {
  --color-bg: #EF6A6F;
}
.c-cicon__frame[data-cicon="2"] {
  --color-bg: #5E8641;
}
.c-cicon__frame[data-cicon="3"] {
  --color-bg: #A0755A;
}
.c-cicon__frame[data-cicon="4"] {
  --color-bg: #418386;
}
.c-cicon__frame[data-cicon="5"] {
  --color-bg: #BE883E;
}
.c-cicon__frame[data-cicon="6"] {
  --color-bg: #BE523E;
}
.c-cicon__frame[data-cicon="7"] {
  --color-bg: #8AAD61;
}
.c-cicon__frame[data-cicon="8"] {
  --color-bg: #AC9855;
}
.c-cicon__frame[data-cicon="9"] {
  --color-bg: #805B6C;
}
.c-cicon__frame[data-cicon="10"] {
  --color-bg: #963A3A;
}
@media (min-width: 768px) {
  /* ===============================================
    * Upper 768px *
  =============================================== */
  /* ===============================================
    * BUTTON *
  =============================================== */
  /* ===============================================
    * CAMPAIGN ICON *
  =============================================== */
}
@media (max-width: 767px) {
  /* ===============================================
    * lower 767px *
  =============================================== */
  /* ===============================================
    * BUTTON *
  =============================================== */
  /* ===============================================
    * CAMPAIGN ICON *
  =============================================== */
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
  .c-button__skin--primary:hover {
    --color-bg: transparent;
    --color-font: var(--color-brand-main1);
  }
  .c-button__skin--secondary:hover {
    --color-bg: transparent;
    --color-font: var(--color-brand-main2);
  }
  .c-button__skin--return:hover {
    --color-border: var(--color-brand-sub1);
    --color-font: var(--color-brand-sub1);
  }
}
@media (hover: none) {
  .c-button__skin--primary {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-button__skin--primary:active {
    --color-bg: transparent;
    --color-font: var(--color-brand-main1);
  }
  .c-button__skin--secondary {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-button__skin--secondary:active {
    --color-bg: transparent;
    --color-font: var(--color-brand-main2);
  }
  .c-button__skin--return {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-button__skin--return:active {
    --color-border: var(--color-brand-sub1);
    --color-font: var(--color-brand-sub1);
  }
}