@charset "utf-8";

@media screen, print {
  .main-block {
    margin-left: auto;
    margin-right: auto;
  }

  .main-block + .main-block {
    margin-top: 5rem;
  }

  #blockLead {
    text-align: center;
  }

  .page-title {
    line-height: 1.4;
  }

  .block-supporter {
    border-radius: 1.5rem;
    border-style: solid;
    border-width: .3rem;
    padding: 3rem 1rem;
  }

  #blockMonthly {
    border-color: var(--cm-yellow);
  }

  #blockOnetime {
    border-color: var(--cm-green);
  }

  .block-title {
    line-height: 1.3;
    margin-bottom: 2rem; 
  }

  #blockMonthly .block-title {
    color: var(--cm-yellow);
  }

  #blockOnetime .block-title {
    color: var(--cm-green);
  }

  .sup-form {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem auto 0;
    width: 100%;
  }

  .sup-fmselct {
    appearance: menulist;
    border: #595757 solid .1rem;
    padding: 1rem 1rem;
    width: 100%;
  }

  .sup-fmbtn {
    align-items: center;
    border-radius: 1rem;
    color: #fff;
    display: flex;
    justify-content: center;
    line-height: 5rem;
    width: 100%;
  }

  #blockMonthly .sup-fmbtn {
    background-color: var(--cm-yellow);
  }

  #blockOnetime .sup-fmbtn {
    background-color: var(--cm-green);
  }

  #blockChangeCard .sup-fmbtn,
  #blockStop .sup-fmbtn,
  #blockPassword .sup-fmbtn {
    background-color: #79bcc9;
    margin: 2rem auto 0;
  }

  #blockCard .block-para {
    line-height: 1.6;
    width: auto; /* reset */
  }

  #blockCard .block-para + .block-para {
    margin-top: 2rem;
  }
}


/*** SP BP ***/
@media screen and (min-width: 375px) {
}


/*** SP BP ***/
@media screen and (min-width: 480px) {
  .block-supporter {
    padding: 3rem 2rem;
  }
}

/*** TB ***/
@media screen and (min-width: 640px) {
  .main-block {
    width: min(100%, 75rem);
  }

  .main-block + .main-block {
    margin-top: 8rem;
  }

  .block-supporter {
    padding: 3rem;
  }

  .block-para {
    margin-left: auto;
    margin-right: auto;
  }

  .sup-form {
    flex-direction: row;
  }

  .sup-fmselct {
    cursor: pointer;
  }

  .sup-fmbtn {
    cursor: pointer;
    width: 70%;
  }

  .sup-fmbtn:hover {
    opacity: .7;
  }
}

/** SP BP **/
@media screen and (min-width: 768px) {
  .block-supporter {
    padding: 3rem 4rem;
  }

  .sup-form {
    gap: 3rem;
    justify-content: center;
  }

  .sup-fmselct {
    width: min(100%, 40rem);
  }

  .sup-fmbtn {
    width: 30rem;
  }
}


/** TB tblg **/
@media screen and (min-width: 800px) {

}

/*** PC ***/
@media screen and (min-width: 960px) {
  .block-supporter {
    padding: 3rem 6rem;
  }

  .sup-fmselct {
    line-height: 4rem;
    width: 40rem;
  }

  .sup-fmbtn {
    line-height: 4rem;
    width: 25rem;
  }

  #blockChangeCard .sup-fmbtn,
  #blockStop .sup-fmbtn,
  #blockPassword .sup-fmbtn {
    width: 30rem;
  }
}


/** PC pclg **/
@media screen and (min-width: 1280px) {

}

/*****************/
/***   Print   ***/
/*****************/
@media print {


}