@charset "utf-8";

@import url(/campaign/css/campaign-detail.css);

/* ========== c-heading ========== */

.c-heading3-01.cpn-heading-02{
  border-left: none;
}

.c-heading3-01.cpn-heading-02 h2{
  color: #0895e6;
}

.c-heading3-01.cpn-heading-02 h3,
.c-heading4-01 h2, .c-heading4-01 h3, .c-heading4-01 h4{
  border-bottom: none;
  padding-left: 0;
  padding-bottom: 0;
}

.c-heading3-01.cpn-heading-02 h3{
  font-size: 150%;
}

.c-heading4-01.sty-heading-attention{
  position: relative;
}
.c-heading4-01.sty-heading-attention h3::before{
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("/assets/img/marker_04_@2x.png") no-repeat;
    background-size: auto 18px;
    margin-right: 8px;
    vertical-align: baseline;
}

.c-heading4-01.cpn-heading-03 h3,
.c-heading4-01.sty-heading-attention h3,
.c-column-group.sty-swap-col .c-heading4-01 h3,
.c-column-group.sty-swap-col .c-heading4-01 h4{
  font-size: 125%;
}

@media only screen and (max-width: 640px){
  .c-heading3-01.cpn-heading-02 h3{
    font-size: 125%;
  }
  .c-heading4-01.sty-heading-attention h3::before{
    vertical-align: top;
  }
  .c-heading4-01.cpn-heading-03 h3,
  .c-heading4-01.sty-heading-attention h3,
  .c-column-group.sty-swap-col .c-heading4-01 h3,
  .c-column-group.sty-swap-col .c-heading4-01 h4{
   font-size: 112.5%
  }
}

/* ========== c-column-group ========== */
.c-column-group.sty-swap-col.--amount::before,
.c-column-group.sty-swap-col.--amount::after {
  display: none;
}
.c-column-group.sty-swap-col.--amount{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 560px;
  margin-right: auto;
  margin-left: auto;
}
.c-column-group.sty-swap-col .col-unit-1\/3{
  padding: 20px 32px;
  background-color: #def2fe;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.c-column-group.sty-swap-col.--amount .col-unit-1\/3{
  margin-left: 0;
  justify-content: start;
  float: none;
  width: 48.57142857142857%;
}
.c-column-group.sty-swap-col.--amount .col-unit-1\/3:nth-child(n+3) {
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 640px){
  .c-column-group.sty-swap-col.--amount{
    width: 100%;
  }
  .c-column-group.sty-swap-col.--amount .col-unit-1\/3{
    margin: 0;
    padding: 15px 20px;
    width: 48.57142857142857%;
  }
  .c-column-group.sty-swap-col.--amount .col-unit-1\/3:nth-child(n+3) {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========== c-btn ========== */
.c-btn-05.sty-btn-swap-01{
  /* border-top: 1px solid #14dff7;
  border-bottom: 1px solid #023bcd;
  background: linear-gradient(to bottom,#0c9ee8 0,#0689e2 100%); */
}

.c-btn-account.c-btn-square.sty-btn-fx {
  padding-left: 54px;
}

.c-btn-account.c-btn-square.sty-btn-fx::before {
    /* width: 18px;
    height: 65%;
    background-image: url(/assets/img/marker_01_@2x.png);
    background-repeat: no-repeat;
    background-size: auto 18px;
    background-position: -216px 0;
    position: absolute;
    top: 18px;
    left: 24px;
    content: ""; */
    display: none;
}

@media only screen and (max-width: 640px){
  .c-btn-account.c-btn-square.sty-btn-fx{
    position: relative;
  }
  .c-btn-account.c-btn-square.sty-btn-fx::before {
      /* width: 18px;
      height: 65%;
      background-image: url(/assets/img/marker_01_@2x.png);
      background-repeat: no-repeat;
      background-size: auto 18px;
      background-position: -216px 0;
      position: absolute;
      top: 18px;
      left: 24px;
      content: "";
      display: block; */
  }
}

/* ========== sty-swap-flg ========== */

.sty-swap-flg{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.sty-swap-flg__item{
  width: calc(50% - 5px);
}

/* ========== sty-swap-amount ========== */
.sty-swap-amount-wrap{
  margin: 0;
  padding: 15px 15px 12px;
  background-color: #fff;
  border-radius: 10px;
}

.sty-swap-amount-01{
  font-size: 200%;
  font-weight: bold;
  color: #e50000;
}

.sty-swap-amount-02{
  color: #0895e6;
  font-weight: bold;
}

.sty-swap-amount-01 em,
.sty-swap-amount-02 em{
  font-size: 150%;
  word-break: break-all;
}

@media only screen and (max-width: 640px){
  .sty-swap-amount-wrap{
    padding: 10px 10px 8px;
    border-radius: 8px;
  }
  .sty-swap-amount-01{
    font-size: 150%;
  }

  .sty-swap-amount-01 em,
  .sty-swap-amount-02 em{
    font-size: 150%;
  }
}